repopack-output.txt

This file is a merged representation of the entire codebase, combining all repository files into a single document.
Generated by Repopack on: 2024-11-21T07:38:46.975Z

================================================================
File Summary
================================================================

Purpose:
--------
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.

File Format:
------------
The content is organized as follows:
1. This summary section
2. Repository information
3. Repository structure
4. Multiple file entries, each consisting of:
  a. A separator line (================)
  b. The file path (File: path/to/file)
  c. Another separator line
  d. The full contents of the file
  e. A blank line

Usage Guidelines:
-----------------
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.

Notes:
------
- Some files may have been excluded based on .gitignore rules and Repopack's
  configuration.
- Binary files are not included in this packed representation. Please refer to
  the Repository Structure section for a complete list of file paths, including
  binary files.

Additional Info:
----------------

For more information about Repopack, visit: https://github.com/yamadashy/repopack

================================================================
Repository Structure
================================================================
cmd/
  icongen/
    main.go
  server/
    main.go
internals/
  config/
    config.go
  shared/
    menudata.go
  ui/
    layouts/
      base.templ
      docs.templ
    pages/
      accordion.templ
      alert.templ
      avatar.templ
      button.templ
      card.templ
      checkbox.templ
      datepicker.templ
      dropdown_menu.templ
      form.templ
      how_to_use.templ
      icon.templ
      input.templ
      introduction.templ
      landing.templ
      modal.templ
      radio_group.templ
      select.templ
      sheet.templ
      tabs.templ
      themes.templ
      toggle.templ
    showcase/
      accordion.templ
      alert.templ
      avatar.templ
      button.templ
      card.templ
      checkbox.templ
      datepicker.templ
      dropdown_menu.templ
      embed.go
      form.templ
      icon.templ
      input.templ
      modal.templ
      radio_group.templ
      select.templ
      sheet.templ
      tabs.templ
      toggle.templ
pkg/
  components/
    accordion.templ
    alert.templ
    avatar.templ
    button.templ
    card.templ
    checkbox.templ
    datepicker.templ
    dropdown_menu.templ
    embed.go
    footer.templ
    form.templ
    input.templ
    modal.templ
    navbar.templ
    radio_group.templ
    select.templ
    sheet.templ
    sidebar_right.templ
    sidebar.templ
    tabs.templ
    themeswitcher.templ
    toggle.templ
  icons/
    embed.go
    icon_defs.go
    icons.go
  styles/
    goilerplate.css
  utils/
    utils.go
.dockerignore
.env.example
.gitignore
CHEATSHEET.md
CONTRIBUTING.md
Dockerfile
go.mod
go.sum
LICENSE
Makefile
README.md
tailwind.config.js
tailwind.config.lib.js

================================================================
Repository Files
================================================================

================
File: cmd/icongen/main.go
================
package main

import (
	"fmt"
	"os"
	"path/filepath"
	"strings"
)

const (
	iconDir        = "./lucide/icons" // Path to the Lucide SVG files
	outputFile     = "./pkg/icons/icon_defs.go"
	iconContentDir = "./pkg/icons/content" // Directory for individual icon contents
)

func main() {
	// Read all files from the icon directory
	files, err := os.ReadDir(iconDir)
	if err != nil {
		panic(err)
	}

	// Initialize slice for icon definitions
	var iconDefs []string
	iconDefs = append(iconDefs, "package icons\n")
	iconDefs = append(iconDefs, "// This file is auto generated\n")

	// Create the content directory if it doesn't exist
	err = os.MkdirAll(iconContentDir, os.ModePerm)
	if err != nil {
		panic(err)
	}

	// Process each SVG file
	for _, file := range files {
		if filepath.Ext(file.Name()) == ".svg" {
			name := strings.TrimSuffix(file.Name(), ".svg")
			funcName := toPascalCase(name)

			// Add icon definition
			iconDefs = append(iconDefs, fmt.Sprintf("var %s = Icon(%q)\n", funcName, name))

			// Save icon content to a separate file
			content, err := os.ReadFile(filepath.Join(iconDir, file.Name()))
			if err != nil {
				panic(err)
			}

			err = os.WriteFile(filepath.Join(iconContentDir, name+".svg"), content, 0644)
			if err != nil {
				panic(err)
			}
		}
	}

	// Write all icon definitions to the output file
	err = os.WriteFile(outputFile, []byte(strings.Join(iconDefs, "")), 0644)
	if err != nil {
		panic(err)
	}

	fmt.Println("Icon definitions and contents generated successfully!")
}

// toPascalCase converts a kebab-case string to PascalCase
func toPascalCase(s string) string {
	words := strings.Split(s, "-")
	for i, word := range words {
		words[i] = strings.Title(word)
	}
	return strings.Join(words, "")
}

================
File: cmd/server/main.go
================
package main

import (
	"fmt"
	"net/http"

	"github.com/a-h/templ"
	"github.com/axzilla/goilerplate/assets"
	"github.com/axzilla/goilerplate/internals/config"
	"github.com/axzilla/goilerplate/internals/ui/pages"
)

func main() {
	mux := http.NewServeMux()
	config.LoadConfig()

	SetupAssetsRoutes(mux)

	mux.Handle("GET /", templ.Handler(pages.Landing()))
	mux.Handle("GET /docs/components", http.RedirectHandler("/docs/components/accordion", http.StatusSeeOther))
	mux.Handle("GET /docs/getting-started", http.RedirectHandler("/docs/introduction", http.StatusSeeOther))
	mux.Handle("GET /docs/introduction", templ.Handler(pages.Introduction()))
	mux.Handle("GET /docs/how-to-use", templ.Handler(pages.HowToUse()))
	mux.Handle("GET /docs/themes", templ.Handler(pages.Themes()))
	// Components
	mux.Handle("GET /docs/components/accordion", templ.Handler(pages.Accordion()))
	mux.Handle("GET /docs/components/alert", templ.Handler(pages.Alert()))
	mux.Handle("GET /docs/components/avatar", templ.Handler(pages.Avatar()))
	mux.Handle("GET /docs/components/button", templ.Handler(pages.Button()))
	mux.Handle("GET /docs/components/card", templ.Handler(pages.Card()))
	mux.Handle("GET /docs/components/checkbox", templ.Handler(pages.Checkbox()))
	mux.Handle("GET /docs/components/datepicker", templ.Handler(pages.Datepicker()))
	mux.Handle("GET /docs/components/dropdown-menu", templ.Handler(pages.DropdownMenu()))
	mux.Handle("GET /docs/components/form", templ.Handler(pages.Form()))
	mux.Handle("GET /docs/components/icon", templ.Handler(pages.Icon()))
	mux.Handle("GET /docs/components/input", templ.Handler(pages.Input()))
	mux.Handle("GET /docs/components/modal", templ.Handler(pages.Modal()))
	mux.Handle("GET /docs/components/radio-group", templ.Handler(pages.RadioGroup()))
	mux.Handle("GET /docs/components/select", templ.Handler(pages.Select()))
	mux.Handle("GET /docs/components/sheet", templ.Handler(pages.Sheet()))
	mux.Handle("GET /docs/components/tabs", templ.Handler(pages.Tabs()))
	mux.Handle("GET /docs/components/toggle", templ.Handler(pages.Toggle()))

	fmt.Println("Server is running on http://localhost:8090")
	http.ListenAndServe(":8090", mux)
}

func SetupAssetsRoutes(mux *http.ServeMux) {
	var isDevelopment = config.AppConfig.GoEnv != "production"

	// We need this for Templ to work
	disableCacheInDevMode := func(next http.Handler) http.Handler {
		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
			if isDevelopment {
				w.Header().Set("Cache-Control", "no-store")
			}
			next.ServeHTTP(w, r)
		})
	}

	// Serve static files from the assets directory
	var fs http.Handler
	if isDevelopment {
		fs = http.FileServer(http.Dir("./assets"))
	} else {
		fs = http.FileServer(http.FS(assets.Assets))
	}

	mux.Handle("GET /assets/*", disableCacheInDevMode(http.StripPrefix("/assets/", fs)))
}

================
File: internals/config/config.go
================
package config

import (
	"fmt"
	"log"
	"os"

	"github.com/joho/godotenv"
)

type Config struct {
	GoEnv string
}

var AppConfig *Config

func LoadConfig() {
	err := godotenv.Load()
	if err != nil {
		fmt.Println("Error loading .env file")
	} else {
		log.Println(".env file initialized.")
	}

	AppConfig = &Config{
		GoEnv: os.Getenv("GO_ENV"),
	}
}

================
File: internals/shared/menudata.go
================
package shared

type SideLink struct {
	Text  string
	Href  string
	Icon  string
	Click string
}

type Section struct {
	Title string
	Links []SideLink
}

var Sections = []Section{
	{
		Title: "Getting Started",
		Links: []SideLink{
			{
				Text: "Introduction",
				Href: "/docs/introduction",
			},
			{
				Text: "How to Use",
				Href: "/docs/how-to-use",
			},
			{
				Text: "Themes",
				Href: "/docs/themes",
			},
		},
	},
	{
		Title: "Components",
		Links: []SideLink{
			{
				Text: "Accordion",
				Href: "/docs/components/accordion",
			},
			{
				Text: "Alert",
				Href: "/docs/components/alert",
			},
			{
				Text: "Avatar",
				Href: "/docs/components/avatar",
			},
			{
				Text: "Button",
				Href: "/docs/components/button",
			},
			{
				Text: "Card",
				Href: "/docs/components/card",
			},
			{
				Text: "Checkbox",
				Href: "/docs/components/checkbox",
			},
			{
				Text: "Datepicker",
				Href: "/docs/components/datepicker",
			},
			{
				Text: "Dropdown Menu",
				Href: "/docs/components/dropdown-menu",
			},
			{
				Text: "Form",
				Href: "/docs/components/form",
			},

			{
				Text: "Icon",
				Href: "/docs/components/icon",
			},
			{
				Text: "Input",
				Href: "/docs/components/input",
			},
			{
				Text: "Modal",
				Href: "/docs/components/modal",
			},
			{
				Text: "Radio Group",
				Href: "/docs/components/radio-group",
			},
			{
				Text: "Select",
				Href: "/docs/components/select",
			},
			{
				Text: "Sheet",
				Href: "/docs/components/sheet",
			},
			{
				Text: "Tabs",
				Href: "/docs/components/tabs",
			},
			{
				Text: "Toggle",
				Href: "/docs/components/toggle",
			},
		},
	},
}

================
File: internals/ui/layouts/base.templ
================
package layouts

import "github.com/axzilla/goilerplate/internals/config"

templ BaseLayout() {
	<!DOCTYPE html>
	<html lang="en" class="h-full">
		<head>
			<title>Goilerplate - Modern UI Components for Go & Templ</title>
			<meta charset="UTF-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<style>
                /* Hide the page initially */
                .page-loader { display: none; }
                html.pre-load .page-loader { display: block; }
                html.pre-load body { display: none; }
            </style>
			<script>
                // Immediately set theme and remove pre-load class
                (function() {
                    document.documentElement.classList.add('pre-load');
                    var appTheme = localStorage.getItem('appTheme') || 'light';
                    document.documentElement.classList.toggle('dark', appTheme === 'dark');
                    document.addEventListener('DOMContentLoaded', function() {
                        document.documentElement.classList.remove('pre-load');
                    });
                })();
            </script>
			if config.AppConfig.GoEnv == "production" {
				<!-- Plausible Analytics -->
				<script defer data-domain="goilerplate.com" src="https://plausible.axeladrian.com/js/script.js"></script>
			}
			<!-- Favicon -->
			<link rel="icon" href="/assets/img/gopher.svg" type="image/x-icon"/>
			<!-- Tailwind CSS (local) -->
			<link href="/assets/css/output.css" rel="stylesheet"/>
			<!-- Alpine.js -->
			<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
			<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
			// Theme Customizer 
			<script src="/assets/js/theme-customizer.js"></script>
			<!-- Themes CSS -->
			<link href="/assets/css/themes.css" rel="stylesheet"/>
			<!-- Highlight.js -->
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/woodland.min.css"/>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
			<script>hljs.highlightAll();</script>
		</head>
		<body
			x-data="{
                appTheme: localStorage.getItem('appTheme') || 'light',
                sidebarOpen: false,
                toggleTheme() {
                    this.appTheme = this.appTheme === 'dark' ? 'light' : 'dark';
                    localStorage.setItem('appTheme', this.appTheme);
                    document.documentElement.classList.toggle('dark', this.appTheme === 'dark');
                }
            }"
			class="h-full flex flex-col transition-colors duration-200"
			:class="{'bg-white text-black': appTheme === 'light', 'text-white': appTheme === 'dark'}"
		>
			<div class="flex flex-col min-h-screen">
				{ children... }
			</div>
		</body>
	</html>
}

================
File: internals/ui/layouts/docs.templ
================
package layouts

import "github.com/axzilla/goilerplate/pkg/components"

templ DocsLayout() {
	@BaseLayout() {
		<div class="flex flex-col h-screen">
			<div class="flex-shrink-0">
				@components.Navbar()
			</div>
			<div class="flex flex-1 overflow-hidden">
				<div class="hidden lg:block border-r overflow-y-auto h-full">
					@components.Sidebar()
				</div>
				<main class="flex-1 overflow-y-auto h-full">
					<div class="container max-w-3xl mx-auto px-4 py-8">
						{ children... }
					</div>
				</main>
				<div class="hidden lg:block border-l overflow-y-auto h-full">
					@components.SidebarRight()
				</div>
			</div>
		</div>
		@components.Footer()
	}
}

================
File: internals/ui/pages/accordion.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Accordion() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Accordion</h1>
				<p class="mb-4 text-muted-foreground">A vertically stacked set of interactive headings that each reveal a section of content.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.AccordionShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("accordion.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("accordion.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/alert.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Alert() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Alert</h1>
				<p class="mb-4 text-muted-foreground">Displays a callout for user attention, often used for notifications, warnings, or important messages.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.AlertShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("alert.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("alert.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/avatar.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Avatar() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Avatar</h1>
				<p class="mb-4 text-muted-foreground">An image element with a fallback for representing the user.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.AvatarShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("avatar.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("avatar.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/button.templ
================
package pages

import (
	"embed"
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Button() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Button</h1>
				<p class="mb-4 text-muted-foreground">Displays a button or a component that looks like a button.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.ButtonShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("button.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("button.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

templ CodeSnippetFromEmbedded(filename, language string, embed embed.FS) {
	if content, err := embed.ReadFile(filename); err != nil {
		<div class="error">Error reading file: { filename }: { err.Error() }</div>
	} else {
		@CodeSnippet(string(content), language)
	}
}

templ CodeSnippet(content, language string) {
	<div class="relative" x-data="{ copied: false }">
		<pre class="!overflow-hidden">
			<code x-ref="code" class={ "language-" + language, "!max-h-[501px] !overflow-y-auto rounded-md block" }>
				{ content }
			</code>
		</pre>
		<button
			class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white font-bold py-1 px-2 rounded text-xs"
			x-on:click="
				navigator.clipboard.writeText($refs.code.textContent);
				copied = true;
				setTimeout(() => copied = false, 2001);
			"
			x-text="copied ? 'Copied!' : 'Copy'"
		></button>
	</div>
}

================
File: internals/ui/pages/card.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Card() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Card</h1>
				<p class="mb-4 text-muted-foreground">Displays a card with header, content, and footer.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.CardShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("card.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("card.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/checkbox.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Checkbox() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Checkbox</h1>
				<p class="mb-4 text-muted-foreground">A control that allows the user to toggle between checked and not checked.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.CheckboxShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("checkbox.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("checkbox.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/datepicker.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Datepicker() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Datepicker</h1>
				<p class="mb-4 text-muted-foreground">A date picker component.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.DatepickerShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("datepicker.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("datepicker.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/dropdown_menu.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/pkg/components"
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
)

templ DropdownMenu() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Dropdown Menu</h1>
				<p class="mb-4 text-muted-foreground">The Dropdown Menu component provides a way to display a list of options in a compact form.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.DropdownMenuShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("dropdown_menu.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("dropdown_menu.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/form.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Form() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Form</h1>
				<p class="mb-4 text-muted-foreground">Building forms with Go, Templ & Alpine.js.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.FormShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("form.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("form.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/how_to_use.templ
================
package pages

import "github.com/axzilla/goilerplate/internals/ui/layouts"

templ HowToUse() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">How To Use</h1>
				<p class="mb-4 text-muted-foreground">Learn how to integrate Goilerplate into your projects.</p>
			</div>
			<section class="mb-12">
				<h2 class="text-2xl font-semibold mb-4 text-primary">Two Ways to Use Goilerplate</h2>
				<p class="mb-4">
					Goilerplate offers flexibility in how you can integrate it into your projects. There are two main approaches:
				</p>
				<div class="mb-8">
					<h3 class="text-xl font-semibold mb-2">1. Use as a Package Library</h3>
					<p class="mb-4">
						Install Goilerplate as a Go package and import components as needed:
					</p>
					<pre>
						<code>
							{ `go get github.com/axzilla/goilerplate

// In your Go files
import "github.com/axzilla/goilerplate/pkg/components"

// In your Templ files
@components.Button(components.ButtonProps{Text: "Click me"})` }
						</code>
					</pre>
					<p class="mt-2">This method is quick to set up and easy to update, but offers less customization.</p>
				</div>
				<div class="mb-8">
					<h3 class="text-xl font-semibold mb-2">2. Copy Components to Your Codebase</h3>
					<p class="mb-4">
						Copy the desired components directly into your project:
					</p>
					<ol class="list-decimal pl-6">
						<li>Visit our <a href="/docs/components" class="text-primary underline">components documentation</a></li>
						<li>Find the component you need</li>
						<li>Copy the component code into your project's components folder</li>
					</ol>
					<p class="mt-2">This method allows for maximum customization but requires manual updates.</p>
				</div>
				<div class="mb-8">
					<h3 class="text-xl font-semibold mb-2">Mix and Match</h3>
					<p>
						You can also combine both approaches. For example, use some components as a package and copy others for customization.
						This flexibility allows you to balance between ease of use and customization needs.
					</p>
				</div>
			</section>
			<section class="mb-12">
				<h2 class="text-2xl font-semibold mb-4 text-primary">Quickstart Template</h2>
				<p class="mb-4">
					For a ready-to-go setup, check out our <a href="https://github.com/axzilla/goilerplate-quickstart" class="text-primary underline">Goilerplate Quickstart</a> template.
					This template uses Goilerplate as a package library but can be easily modified to use copied components or a mix of both approaches.
				</p>
				<pre>
					<code>
						{ `git clone https://github.com/axzilla/goilerplate-quickstart.git
cd goilerplate-quickstart

// Follow the README instructions` }
					</code>
				</pre>
			</section>
			<section class="mb-12">
				<h2 class="text-2xl font-semibold mb-4 text-primary">Manual Setup Requirements</h2>
				<p class="mb-4">
					If you choose to set up Goilerplate manually or copy components, ensure you have the following set up in your project:
				</p>
				<ul class="list-disc pl-6 space-y-2">
					<li>
						<strong>Templ:</strong> Follow the 
						<a href="https://templ.guide/quick-start/installation" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
							Templ installation guide
						</a>
						to set up Templ in your project.
					</li>
					<li>
						<strong>Tailwind CSS:</strong> Set up Tailwind CSS using our 
						<a href="https://github.com/axzilla/goilerplate/blob/main/tailwind.config.js" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
							tailwind.config.js
						</a>
						and
						<a href="https://github.com/axzilla/goilerplate/blob/main/assets/css/input.css" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
							input.css						
						</a>
						as a reference.
					</li>
					<li>
						<strong>Alpine.js:</strong> Include Alpine.js in your project as described in the 
						<a href="https://alpinejs.dev/start-here" class="text-primary underline underline-offset-4 hover:text-primary/80" target="_blank" rel="noopener noreferrer">
							Alpine.js documentation
						</a>.
					</li>
				</ul>
			</section>
			<section>
				<h2 class="text-2xl font-semibold mb-4 text-primary">Next Steps</h2>
				<p class="mb-4">
					Whichever approach you choose, explore our 
					<a href="/docs/components" class="text-primary underline underline-offset-4 hover:text-primary/80">
						components
					</a>
					to see code examples and usage details for each Goilerplate component. Feel free to experiment with different integration methods to find what works best for your project!
				</p>
				<p>
					Remember, our components page provides code snippets and usage examples, but for comprehensive documentation on Templ, Tailwind CSS, or Alpine.js, refer to their respective official documentation.
				</p>
			</section>
		</div>
	}
}

================
File: internals/ui/pages/icon.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Icon() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Icon</h1>
				<p class="mb-4 text-muted-foreground">
					A wrapper for <a href="https://lucide.dev" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-2 hover:opacity-80 transition-opacity">Lucide Icons</a> with optional settings for size, color, fill, stroke, and custom classes. Browse available icons in the Lucide library to see what you can use.
				</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.IconShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("icon.templ", "go", showcase.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/input.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Input() {
	@layouts.DocsLayout() {
		<div class="mb-16">
			<h1 class="text-3xl font-bold mb-2">Input</h1>
			<p class="mb-4 text-muted-foreground">Displays a form input field or a component that looks like an input field.</p>
		</div>
		@components.Tabs(components.TabsProps{
			Tabs: []components.Tab{
				{
					ID:      "preview",
					Title:   "Preview",
					Content: showcase.InputShowcase(),
				},
				{
					ID:      "code",
					Title:   "Code",
					Content: CodeSnippetFromEmbedded("input.templ", "go", showcase.TemplFiles),
				},
				{
					ID:      "component",
					Title:   "Component",
					Content: CodeSnippetFromEmbedded("input.templ", "go", components.TemplFiles),
				},
			},
			TabsContainerClass: "md:w-1/2",
		})
	}
}

================
File: internals/ui/pages/introduction.templ
================
package pages

import "github.com/axzilla/goilerplate/internals/ui/layouts"

templ Introduction() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">🎉 Goilerplate</h1>
				<p class="mb-4 text-muted-foreground">Modern UI Components for Go & Templ.</p>
			</div>
			<section class="mb-12">
				<h2 class="text-2xl font-semibold mb-4 text-primary">What's this madness?</h2>
				<p class="mb-4">
					Build sleek, interactive web applications with Go and Templ. Seamlessly integrate Alpine.js for enhanced client-side functionality and style effortlessly with Tailwind CSS. Where server-side simplicity meets client-side dynamism.
				</p>
				<p class="mb-4">
					Goilerplate is a wild experiment in bringing the joy of modern UI components to the Go ecosystem. It's like a box of LEGO, but for web dev. And yes, we might have had too much coffee while coding this.
				</p>
				<p class="mb-4">
					We've taken Go, sprinkled some Templ magic, added a dash of Alpine.js, topped it with Tailwind CSS, and voilà! You've got yourself a UI toolkit that'll make JavaScript developers question their life choices.
				</p>
				<p class="mb-4">
					Warning: This project is under heavy development. Expect frequent breaking changes, weird behavior, and possibly code that makes you question our sanity. But hey, that's half the fun, right?
				</p>
				<p class="mb-4">
					We're constantly evolving. Check out our 
					<a
						href="https://github.com/axzilla/goilerplate/releases"
						class="text-primary underline underline-offset-4 hover:text-primary/80"
						target="_blank"
					>
						release notes
					</a> to see what's new and exciting!
				</p>
			</section>
			<section class="mb-12">
				<h2 class="text-2xl font-semibold mb-4 text-primary">Why Goilerplate?</h2>
				<p class="mb-4">
					Inspired by
					<a href="https://ui.shadcn.com/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">
						shadcn/ui
					</a>,
					<a href="https://devdojo.com/pines" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">
						Pines UI
					</a>, and
					<a href="https://daisyui.com/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">
						daisyUI
					</a>,
					Goilerplate brings the philosophy of accessible, customizable components to the Go ecosystem. We've taken the best ideas and adapted them for Go, Templ, Alpine.js, and Tailwind CSS enthusiasts.
				</p>
				<p class="mb-4">
					Our components are designed with accessibility in mind, ensuring your web applications are usable by everyone. And just like our inspirations, every component is fully customizable - tweak them, break them, remake them. It's your playground!
				</p>
			</section>
			<section class="mb-12">
				<h2 class="text-2xl font-semibold mb-4 text-primary">Where are we headed?</h2>
				<p class="mb-4">
					Honestly? We're not entirely sure yet! We're exploring whether to make Goilerplate a strict port of shadcn/ui or to create a unique blend of various inspirations. This journey is as much about discovery as it is about development.
				</p>
				<p class="mb-4">
					What we do know is this: We're committed to providing a flexible, powerful toolkit for Go developers who want to create beautiful, interactive web applications without sacrificing the benefits of server-side rendering.
				</p>
			</section>
			<section>
				<h2 class="text-2xl font-semibold mb-4 text-primary">Who's to Blame?</h2>
				<p class="mb-4">
					We stand on the shoulders of giants. Big thanks to:
				</p>
				<ul class="list-disc pl-6 space-y-2">
					<li><a href="https://golang.org/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">Go</a> - For giving us a language that's not JavaScript</li>
					<li><a href="https://templ.guide" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">Templ</a> - Making templates great again</li>
					<li><a href="https://alpinejs.dev/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">Alpine.js</a> - JavaScript's cool, minimalist cousin</li>
					<li><a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">Tailwind CSS</a> - For saving us from actually writing CSS</li>
					<li><a href="https://ui.shadcn.com/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">shadcn/ui</a> - Major inspiration and component ideas</li>
					<li><a href="https://devdojo.com/pines" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">Pines UI</a> - More inspiration and eye candy</li>
					<li><a href="https://daisyui.com/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-4 hover:text-primary/80">daisyUI</a> - For showing us the power of Tailwind components</li>
				</ul>
			</section>
		</div>
	}
}

================
File: internals/ui/pages/landing.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Landing() {
	@layouts.BaseLayout() {
		<header class="relative flex items-center justify-center w-full min-h-screen bg-gradient-to-br from-gray-100 to-white dark:from-gray-900 dark:to-black text-gray-900 dark:text-white overflow-hidden">
			<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
				<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-2 sm:mb-4">
					<span class="block">Goilerplate</span>
				</h1>
				<p class="text-xl sm:text-2xl lg:text-3xl font-semibold text-gray-600 dark:text-gray-400 mb-4 sm:mb-8">
					Modern UI Components for Go & Templ
				</p>
				<p class="max-w-3xl mx-auto text-base sm:text-lg text-gray-700 dark:text-gray-300 mb-6 sm:mb-10">
					Craft powerful, responsive web applications with Go and Templ. 
					Enhance interactivity with Alpine.js and style effortlessly with Tailwind CSS. 
					Goilerplate bridges the gap between backend robustness and frontend dynamism.
				</p>
				@components.Button(components.ButtonProps{
					Text: "Explore Components",
					Href: "/docs/components",
					Size: "lg",
				})
			</div>
			<div class="absolute bottom-0 left-0 w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40">
				<img src="/assets/img/gopher.svg" alt="Gopher" class="absolute bottom-0 left-0 w-full h-full object-contain transform translate-y-1/3 -translate-x-1/4"/>
			</div>
		</header>
		<div class="fixed bottom-4 right-4 z-50">
			@components.ThemeSwitcher()
		</div>
	}
}

================
File: internals/ui/pages/modal.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Modal() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Modal</h1>
				<p class="mb-4 text-muted-foreground">A modal dialog component for displaying content that requires user interaction.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.ModalShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("modal.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("modal.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/radio_group.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ RadioGroup() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Radio Group</h1>
				<p class="mb-4 text-muted-foreground">A set of radio buttons for selecting a single option from a list.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.RadioGroupShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("radio_group.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("radio_group.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/select.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Select() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Select</h1>
				<p class="mb-4 text-muted-foreground">
					A dropdown menu for selecting a single value from a list of options.
				</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.SelectShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("select.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("select.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/sheet.templ
================
package pages 

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Sheet() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Sheet</h1>
				<p class="mb-4 text-muted-foreground">Extends the Dialog component to display content that complements the main content of the screen.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.SheetShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("sheet.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("sheet.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/tabs.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Tabs() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Tabs</h1>
				<p class="mb-4 text-muted-foreground">A set of layered sections of content—known as tab panels—that are displayed one at a time.</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.TabsShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("tabs.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("tabs.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/pages/themes.templ
================
// internals/ui/pages/theme_customizer.templ

package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/pkg/components"
	"github.com/axzilla/goilerplate/pkg/icons"
)

templ Themes() {
	@layouts.DocsLayout() {
		<div
			x-data="themeCustomizer"
			x-init="init"
		>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Themes</h1>
				<p class="mb-4 text-muted-foreground">Customize the theme of the UI components.</p>
			</div>
			<div class="flex flex-col md:flex-row gap-8">
				<div class="w-full md:w-1/2">
					<div class="flex items-start justify-between mb-4">
						<div>
							<div class="font-semibold">Customize</div>
							<div class="text-xs text-muted-foreground">Pick a style and color for your components.</div>
						</div>
						@components.Button(components.ButtonProps{
							Size:     "icon",
							Variant:  "ghost",
							IconLeft: icons.RotateCcw(icons.IconProps{Size: "14"}),
							Attributes: templ.Attributes{
								"@click": "resetTheme",
							},
						})
					</div>
					@ThemeCustomizer(ThemeCustomizerProps{
						CurrentTheme:  "orange",
						CurrentRadius: "0.5",
						CurrentMode:   "light",
					})
				</div>
				<div class="w-full md:w-1/2">
					<div class="mb-4">
						<div class="font-semibold">Preview</div>
						<div class="text-xs text-muted-foreground">This is how your theme will look like.</div>
					</div>
					@ThemePreview()
				</div>
			</div>
		</div>
	}
}

templ ThemePreview() {
	<div id="theme-preview" class="theme-preview p-6 border rounded-lg">
		@components.Card(components.CardProps{}) {
			@components.CardHeader() {
				@components.CardTitle() {
					User Registration 
				}
				@components.CardDescription() {
					Please fill out the form below to create your account. 
				}
			}
			@components.CardContent() {
				<form class="space-y-4">
					<div class="space-y-2">
						<label for="username" class="text-sm font-medium">Username</label>
						@components.Input(components.InputProps{
							ID:          "username",
							Name:        "username",
							Type:        components.InputTypeText,
							Placeholder: "Enter your username",
						})
					</div>
					<div class="space-y-2">
						<label for="email" class="text-sm font-medium">Email</label>
						@components.Input(components.InputProps{
							ID:          "email",
							Name:        "email",
							Type:        components.InputTypeEmail,
							Placeholder: "Enter your email",
						})
					</div>
					<div class="space-y-2">
						<label for="password" class="text-sm font-medium">Password</label>
						@components.Input(components.InputProps{
							ID:          "password",
							Name:        "password",
							Type:        components.InputTypePassword,
							Placeholder: "Enter your password",
						})
					</div>
					<div class="space-y-2">
						<label for="birthdate" class="text-sm font-medium">Date of Birth</label>
						@components.Datepicker(components.DatepickerProps{
							ID:          "birthdate",
							Name:        "birthdate",
							Placeholder: "Select your birth date",
							Format:      "YYYY-MM-DD",
						})
					</div>
					<div class="space-y-2">
						<label class="text-sm font-medium">Preferred Contact Method</label>
						@components.RadioGroup(components.RadioGroupProps{Name: "contact-method"}) {
							@components.RadioGroupItem(components.RadioGroupItemProps{
								Value: "email",
								ID:    "contact-email",
								Name:  "contact-method",
								Label: templ.Raw("Email"),
							})
							@components.RadioGroupItem(components.RadioGroupItemProps{
								Value: "phone",
								ID:    "contact-phone",
								Name:  "contact-method",
								Label: templ.Raw("Phone"),
							})
							@components.RadioGroupItem(components.RadioGroupItemProps{
								Value:      "mail",
								ID:         "contact-mail",
								Name:       "contact-method",
								Label:      templ.Raw("Physical Mail"),
								Attributes: templ.Attributes{"disabled": "true"},
							})
						}
					</div>
					<div class="space-y-4">
						<label class="text-sm font-medium">Preferences</label>
						<div class="space-y-2">
							@components.Toggle(components.ToggleProps{
								ID:         "marketing",
								Name:       "marketing",
								LabelRight: "Receive marketing emails",
							})
						</div>
						<div class="space-y-2">
							@components.Toggle(components.ToggleProps{
								ID:         "notifications",
								Name:       "notifications",
								LabelRight: "Enable notifications",
								Attributes: templ.Attributes{"checked": "true"},
							})
						</div>
						<div class="space-y-2">
							@components.Toggle(components.ToggleProps{
								ID:         "beta",
								Name:       "beta",
								LabelRight: "Join beta program",
								Attributes: templ.Attributes{"disabled": "true"},
							})
						</div>
					</div>
					<div class="space-y-2">
						@components.Checkbox(components.CheckboxProps{
							ID:    "terms",
							Name:  "terms",
							Value: "accepted",
							Label: "I agree to the Terms and Conditions",
						})
					</div>
					<div class="space-y-2">
						@components.Checkbox(components.CheckboxProps{
							ID:    "newsletter",
							Name:  "newsletter",
							Value: "subscribed",
							Label: "Subscribe to our newsletter",
						})
					</div>
				</form>
			}
			@components.CardFooter() {
				<div class="flex justify-between w-full">
					@components.Button(components.ButtonProps{
						Text:    "Cancel",
						Variant: "secondary",
					})
					@components.Button(components.ButtonProps{
						Text:    "Register",
						Variant: "primary",
					})
				</div>
			}
		}
	</div>
}

type ThemeCustomizerProps struct {
	CurrentTheme  string
	CurrentRadius string
	CurrentMode   string
}

templ ThemeCustomizer(props ThemeCustomizerProps) {
	<div
		class="theme-customizer w-full flex flex-col gap-2"
	>
		<div class="flex flex-1 flex-col space-y-4 md:space-y-6">
			@ThemeSelector()
			@RadiusSelector()
			@ModeSelector()
		</div>
		@components.ModalTrigger("css-modal") {
			@components.Button(components.ButtonProps{Text: "Generate and Copy CSS", FullWidth: true, Attributes: templ.Attributes{
				"@click": "getGeneratedCSS",
			}})
		}
		@components.Modal(components.ModalProps{ID: "css-modal", Class: "max-w-xl"}) {
			@components.ModalHeader() {
				Generated CSS Code
			}
			@components.ModalBody() {
				<pre x-text="generatedCSS" class="text-primary p-4 rounded overflow-x-auto max-h-96"></pre>
			}
			@components.ModalFooter() {
				<div class="flex gap-2">
					@components.Button(components.ButtonProps{
						Text:       "Copy to Clipboard",
						Variant:    "primary",
						Attributes: templ.Attributes{"@click": "copyToClipboard"},
					})
					@components.ModalClose("css-modal") {
						@components.Button(components.ButtonProps{
							Text:    "Close",
							Variant: "secondary",
						})
					}
				</div>
			}
		}
	</div>
}

templ ThemeSelector() {
	<div class="space-y-1.5">
		<label class="text-xs font-medium">Theme</label>
		<div class="grid grid-cols-3 gap-2">
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'zinc' }"
				style="--theme-primary: hsl(240 5.9% 10%);"
				@click="setTheme('zinc')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'zinc'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Zinc
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'slate' }"
				style="--theme-primary: hsl(215.4 16.3% 46.9%);"
				@click="setTheme('slate')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'slate'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Slate
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'stone' }"
				style="--theme-primary: hsl(25 5.3% 44.7%);"
				@click="setTheme('stone')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'stone'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Stone
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'gray' }"
				style="--theme-primary: hsl(220 8.9% 46.1%);"
				@click="setTheme('gray')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'gray'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Gray
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'neutral' }"
				style="--theme-primary: hsl(0 0% 45.1%);"
				@click="setTheme('neutral')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'neutral'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Neutral
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'red' }"
				style="--theme-primary: hsl(0 72.2% 50.6%);"
				@click="setTheme('red')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'red'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Red
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'rose' }"
				style="--theme-primary: hsl(346.8 77.2% 49.8%);"
				@click="setTheme('rose')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'rose'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Rose
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'orange' }"
				style="--theme-primary: hsl(24.6 95% 53.1%);"
				@click="setTheme('orange')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'orange'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Orange
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'green' }"
				style="--theme-primary: hsl(142.1 76.2% 36.3%);"
				@click="setTheme('green')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'green'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Green
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'blue' }"
				style="--theme-primary: hsl(221.2 83.2% 53.3%);"
				@click="setTheme('blue')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'blue'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Blue
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'yellow' }"
				style="--theme-primary: hsl(47.9 95.8% 53.1%);"
				@click="setTheme('yellow')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'yellow'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Yellow
			</button>
			<button
				class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start border-2"
				:class="{ 'border-primary': theme === 'violet' }"
				style="--theme-primary: hsl(262.1 83.3% 57.8%);"
				@click="setTheme('violet')"
			>
				<span class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
					<span x-show="theme === 'violet'">
						@icons.Check(icons.IconProps{Size: "12", Color: "white"})
					</span>
				</span>
				Violet
			</button>
		</div>
	</div>
}

templ RadiusSelector() {
	<div class="space-y-1.5">
		<label class="text-xs font-medium">Radius</label>
		<div class="grid grid-cols-5 gap-2">
			<button
				class="px-3 py-1 rounded border"
				:class="{ 'border-2 border-primary': radius === '0' }"
				@click="setRadius('0')"
			>
				0
			</button>
			<button
				class="px-3 py-1 rounded border"
				:class="{ 'border-2 border-primary': radius === '0.3' }"
				@click="setRadius('0.3')"
			>
				0.3
			</button>
			<button
				class="px-3 py-1 rounded border"
				:class="{ 'border-2 border-primary': radius === '0.5' }"
				@click="setRadius('0.5')"
			>
				0.5
			</button>
			<button
				class="px-3 py-1 rounded border"
				:class="{ 'border-2 border-primary': radius === '0.75' }"
				@click="setRadius('0.75')"
			>
				0.75
			</button>
			<button
				class="px-3 py-1 rounded border"
				:class="{ 'border-2 border-primary': radius === '1.0' }"
				@click="setRadius('1.0')"
			>
				1.0
			</button>
		</div>
	</div>
}

templ ModeSelector() {
	<div class="space-y-1.5">
		<label class="text-xs font-medium">Mode</label>
		<div class="grid grid-cols-2 gap-2">
			<button
				class="px-3 py-1 rounded border flex items-center justify-center"
				:class="{ 'border-2 border-primary': appTheme === 'light' }"
				@click="
					appTheme = 'light'
					localStorage.setItem('appTheme', appTheme)
					document.documentElement.classList.toggle('dark', appTheme === 'dark')
				"
			>
				@icons.Sun(icons.IconProps{Size: "15", Class: "mr-2"})
				Light
			</button>
			<button
				class="px-3 py-1 rounded border flex items-center justify-center"
				:class="{ 'border-2 border-primary': appTheme === 'dark' }"
				@click="
					appTheme = 'dark'
					localStorage.setItem('appTheme', appTheme)
					document.documentElement.classList.toggle('dark', appTheme === 'dark')
				"
			>
				@icons.Moon(icons.IconProps{Size: "15", Class: "mr-2"})
				Dark
			</button>
		</div>
	</div>
}

================
File: internals/ui/pages/toggle.templ
================
package pages

import (
	"github.com/axzilla/goilerplate/internals/ui/layouts"
	"github.com/axzilla/goilerplate/internals/ui/showcase"
	"github.com/axzilla/goilerplate/pkg/components"
)

templ Toggle() {
	@layouts.DocsLayout() {
		<div>
			<div class="mb-16">
				<h1 class="text-3xl font-bold mb-2">Toggle</h1>
				<p class="mb-4 text-muted-foreground">
					A control that allows users to toggle between two states, typically used for enabling or disabling features.
				</p>
			</div>
			@components.Tabs(components.TabsProps{
				Tabs: []components.Tab{
					{
						ID:      "preview",
						Title:   "Preview",
						Content: showcase.ToggleShowcase(),
					},
					{
						ID:      "code",
						Title:   "Code",
						Content: CodeSnippetFromEmbedded("toggle.templ", "go", showcase.TemplFiles),
					},
					{
						ID:      "component",
						Title:   "Component",
						Content: CodeSnippetFromEmbedded("toggle.templ", "go", components.TemplFiles),
					},
				},
				TabsContainerClass:    "md:w-1/2",
				ContentContainerClass: "w-full",
			})
		</div>
	}
}

================
File: internals/ui/showcase/accordion.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ AccordionShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		@components.Accordion(components.AccordionProps{
			Items: []components.AccordionItem{
				{
					ID:      "item-1",
					Trigger: templ.Raw("Is it accessible?"),
					Content: templ.Raw("Yes. It adheres to the WAI-ARIA design pattern."),
				},
				{
					ID:      "item-2",
					Trigger: templ.Raw("Is it styled?"),
					Content: templ.Raw("Yes. It comes with default styles that match the other components' aesthetic."),
				},
				{
					ID:      "item-3",
					Trigger: templ.Raw("Is it animated?"),
					Content: templ.Raw("Yes. It's animated by default, but you can disable it if you prefer."),
				},
			},
			Class: "w-full sm:max-w-[70%]",
		})
	</div>
}

================
File: internals/ui/showcase/alert.templ
================
package showcase

import (
	"github.com/axzilla/goilerplate/pkg/components"
	"github.com/axzilla/goilerplate/pkg/icons"
)

templ AlertShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div class="space-y-4 max-w-md w-full">
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Default Alert</h2>
				<div class="space-y-2">
					@components.Alert(components.AlertProps{Variant: components.DefaultAlert}) {
						@icons.Rocket(icons.IconProps{Size: "16"})
						@components.AlertTitle() {
							Note
						}
						@components.AlertDescription() {
							This is a default alert — check it out!
						}
					}
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Destructive Alert</h2>
				<div class="space-y-2">
					@components.Alert(components.AlertProps{Variant: components.DestructiveAlert}) {
						@icons.TriangleAlert(icons.IconProps{Size: "16"})
						@components.AlertTitle() {
							Error
						}
						@components.AlertDescription() {
							Your session has expired. Please log in again.
						}
					}
				</div>
			</div>
		</div>
	</div>
}

================
File: internals/ui/showcase/avatar.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ AvatarShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">With Image</h2>
				<div class="flex flex-wrap gap-2">
					@components.Avatar(components.AvatarProps{
						ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
						Name:     "John Doe",
						Class:    "border-2 border-border",
					})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">With Placeholder</h2>
				<div class="flex flex-wrap gap-2">
					@components.Avatar(components.AvatarProps{
						Name: "The Dude",
					})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">With Sizes</h2>
				<div class="flex flex-wrap gap-2">
					@components.Avatar(components.AvatarProps{
						ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
						Name:     "John Doe",
						Size:     components.AvatarSizeSmall,
						Class:    "border-2 border-border",
					})
					@components.Avatar(components.AvatarProps{
						ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
						Name:     "John Doe",
						Class:    "border-2 border-border",
					})
					@components.Avatar(components.AvatarProps{
						ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
						Name:     "John Doe",
						Size:     components.AvatarSizeLarge,
						Class:    "border-2 border-border",
					})
				</div>
			</div>
		</div>
	</div>
}

================
File: internals/ui/showcase/button.templ
================
package showcase

import (
	"github.com/axzilla/goilerplate/pkg/components"
	"github.com/axzilla/goilerplate/pkg/icons"
)

templ ButtonShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Variants</h2>
				<div class="flex flex-wrap gap-2">
					@components.Button(components.ButtonProps{Text: "Default"})
					@components.Button(components.ButtonProps{Text: "Secondary", Variant: components.Secondary})
					@components.Button(components.ButtonProps{Text: "Destructive", Variant: components.Destructive})
					@components.Button(components.ButtonProps{Text: "Outline", Variant: components.Outline})
					@components.Button(components.ButtonProps{Text: "Ghost", Variant: components.Ghost})
					@components.Button(components.ButtonProps{Text: "Link", Variant: components.Link})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Sizes</h2>
				<div class="flex flex-wrap items-center gap-2">
					@components.Button(components.ButtonProps{Text: "Default"})
					@components.Button(components.ButtonProps{Text: "Small", Size: components.Sm})
					@components.Button(components.ButtonProps{Text: "Large", Size: components.Lg})
					@components.Button(components.ButtonProps{Size: components.ButtonIcon, IconLeft: icons.Rocket(icons.IconProps{Size: "16"})})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-22">States</h2>
				<div class="flex flex-wrap gap-2">
					@components.Button(components.ButtonProps{Text: "Default"})
					// Alpine.js example
					@components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"@click": "alert('Hey Dude!')"}})
					// Vanilla JS example
					// @components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"onclick": "alert('Hey Dude!')"}})
					@components.Button(components.ButtonProps{Text: "Disabled", Disabled: true})
					// @components.Button(components.ButtonProps{Text: "Disabled", Disabled: "true"})
					@components.Button(components.ButtonProps{Text: "Full Width", Class: "w-full"})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">With Icon</h2>
				<div class="flex flex-wrap gap-2">
					@components.Button(components.ButtonProps{
						Text:     "Icon Left",
						IconLeft: icons.Rocket(icons.IconProps{Size: "16"}),
					})
					@components.Button(components.ButtonProps{
						Text:      "Icon Right",
						IconRight: icons.Rocket(icons.IconProps{Size: "16"}),
					})
				</div>
			</div>
		</div>
	</div>
}

================
File: internals/ui/showcase/card.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ CardShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		@components.Card(components.CardProps{Class: "w-[350px]"}) {
			@components.CardHeader() {
				@components.CardTitle() {
					Card Title
				}
				@components.CardDescription() {
					Card Description
				}
			}
			@components.CardContent() {
				<p>Card Content</p>
			}
			@components.CardFooter() {
				@components.Button(components.ButtonProps{Text: "Action"})
			}
		}
	</div>
}

================
File: internals/ui/showcase/checkbox.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ CheckboxShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Default Checkbox</h2>
				@components.Checkbox(components.CheckboxProps{
					ID:    "default-checkbox",
					Name:  "default",
					Value: "default",
					Label: "Accept terms and conditions",
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Checked Checkbox</h2>
				@components.Checkbox(components.CheckboxProps{
					ID:         "checked-checkbox",
					Name:       "newsletter",
					Value:      "subscribe",
					Label:      "Receive newsletter",
					Attributes: templ.Attributes{"checked": "true"},
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Disabled Checkbox</h2>
				@components.Checkbox(components.CheckboxProps{
					ID:         "disabled-checkbox",
					Name:       "disabled",
					Value:      "disabled",
					Label:      "Disabled option",
					Attributes: templ.Attributes{"disabled": "true"},
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Disabled Checked Checkbox</h2>
				@components.Checkbox(components.CheckboxProps{
					ID:         "disabled-checked-checkbox",
					Name:       "disabled-checked",
					Value:      "disabled-checked",
					Label:      "Disabled checked option",
					Attributes: templ.Attributes{"checked": "true", "disabled": "true"},
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Checkbox without Label</h2>
				@components.Checkbox(components.CheckboxProps{
					ID:    "no-label-checkbox",
					Name:  "no-label",
					Value: "no-label",
				})
			</div>
		</div>
	</div>
}

================
File: internals/ui/showcase/datepicker.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ DatepickerShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		@components.Datepicker(components.DatepickerProps{
			ID:          "my-datepicker",
			Name:        "selected-date",
			Placeholder: "Select a date",
			Format:      "YYYY-MM-DD",
			Class:       "w-full max-w-xs",
		})
	</div>
}

================
File: internals/ui/showcase/dropdown_menu.templ
================
package showcase

import (
	"github.com/axzilla/goilerplate/pkg/components"
	"github.com/axzilla/goilerplate/pkg/icons"
)

templ DropdownMenuShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div class="flex gap-2 flex-wrap">
			@components.DropdownMenu(components.DropdownMenuProps{
				Items: []components.DropdownMenuItem{
					{Label: "Profile", Value: "profile"},
					{Label: "Settings", Value: "settings"},
					{Label: "Logout", Value: "logout"},
				},
			})
			@components.DropdownMenu(components.DropdownMenuProps{
				Trigger: components.Button(components.ButtonProps{
					Text:     "User Menu",
					Variant:  "outline",
					IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
				}),
				Position: "right",
				Items: []components.DropdownMenuItem{
					{
						Label:    "Profile",
						IconLeft: icons.User(icons.IconProps{Size: "16"}),
						Href:     "/docs/components/dropdown-menu",
					},
					{
						Label:    "Settings",
						IconLeft: icons.Settings(icons.IconProps{Size: "16"}),
						Href:     "/docs/components/dropdown-menu",
					},
					{
						Label:    "Logout",
						IconLeft: icons.LogOut(icons.IconProps{Size: "16"}),
						Value:    "logout",
					},
				},
			})
			@components.DropdownMenu(components.DropdownMenuProps{
				Trigger: components.Button(components.ButtonProps{
					Text:     "Advanced Menu",
					Variant:  "outline",
					IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
				}),
				Position: "left",
				Items: []components.DropdownMenuItem{
					{Label: "File", SubItems: []components.DropdownMenuItem{
						{Label: "New", Value: "new", Attributes: templ.Attributes{"@click": "alert('New')"}},
						{Label: "Open", Value: "open", Attributes: templ.Attributes{"@click": "alert('Open')"}},
						{Label: "Save", Value: "save", Attributes: templ.Attributes{"@click": "alert('Save')"}},
					}},
					{Label: "Edit", SubItems: []components.DropdownMenuItem{
						{Label: "Cut", Value: "cut", Attributes: templ.Attributes{"@click": "alert('Cut')"}},
						{Label: "Copy", Value: "copy", Attributes: templ.Attributes{"@click": "alert('Copy')"}},
						{Label: "Paste", Value: "paste", Attributes: templ.Attributes{"@click": "alert('Paste')"}},
					}},
					{Label: "View", Disabled: true},
					{Label: "Help", Href: "https://github.com/axzilla/goilerplate", Target: "_blank"},
				},
			})
		</div>
	</div>
}

================
File: internals/ui/showcase/embed.go
================
package showcase

import (
	"embed"
)

//go:embed *.templ
var TemplFiles embed.FS

================
File: internals/ui/showcase/form.templ
================
package showcase

import (
	"encoding/json"
	"github.com/axzilla/goilerplate/pkg/components"
)

type SignupFormData struct {
	Email             string   `json:"email"`
	Role              string   `json:"role"`
	NotificationTypes []string `json:"notificationTypes"`
	Newsletter        bool     `json:"newsletter"`
	Terms             bool     `json:"terms"`
	Date              string   `json:"date"`
}

func (d SignupFormData) ToJSON() string {
	json, _ := json.Marshal(d)
	return string(json)
}

templ FormShowcase() {
	@components.Form(components.FormProps[SignupFormData]{
		ID:     "signup-form",
		Name:   "signup",
		Action: "/api/signup",
		InitialData: SignupFormData{
			Email:             "",
			Role:              "admin",
			NotificationTypes: []string{},
			Newsletter:        true,
			Terms:             true,
		},
		Debug: true,
	}) {
		<h2 class="text-2xl font-bold">Account Settings</h2>
		// Date
		<div class="space-y-2">
			<label class="text-sm font-medium">Date</label>
			@components.Datepicker(components.DatepickerProps{
				ID:          "my-datepicker",
				Name:        "selected-date",
				Placeholder: "Select a date",
				Format:      "M d, Y",
				Class:       "w-full",
				Attributes:  templ.Attributes{"x-model": "formData.date"},
			})
		</div>
		// Email Input
		<div class="space-y-2">
			<label class="text-sm font-medium">Email</label>
			@components.Input(components.InputProps{
				Type:        "email",
				Name:        "email",
				Placeholder: "Enter your email",
				Attributes:  templ.Attributes{"x-model": "formData.email"},
			})
		</div>
		// Role Select
		<div class="space-y-2">
			<label class="text-sm font-medium">Role</label>
			@components.Select(components.SelectProps{
				ID:          "role",
				Name:        "role",
				Placeholder: "Select role",
				Options: []components.SelectOption{
					{Label: "User", Value: "user"},
					{Label: "Admin", Value: "admin"},
					{Label: "Editor", Value: "editor"},
				},
				Attributes: templ.Attributes{"x-model": "formData.role"},
			})
		</div>
		// Notification Types (Multiple Checkboxes)
		<div class="space-y-2">
			<label class="text-sm font-medium">Notification Types</label>
			<div class="space-y-2">
				@components.Checkbox(components.CheckboxProps{
					ID:    "notify-email",
					Name:  "notificationTypes",
					Value: "email",
					Label: "Email Notifications",
					Attributes: templ.Attributes{
						":checked": "formData.notificationTypes.includes('email')",
						"@click": `() => {
							const i = formData.notificationTypes.indexOf('email');
							const n = formData.notificationTypes;
							i > -1 ? n.splice(i, 1) : n.push('email');
						}`,
					},
				})
				@components.Checkbox(components.CheckboxProps{
					ID:    "notify-sms",
					Name:  "notificationTypes",
					Value: "sms",
					Label: "SMS Notifications",
					Attributes: templ.Attributes{
						":checked": "formData.notificationTypes.includes('sms')",
						"@click": `() => {
							const index = formData.notificationTypes.indexOf('sms');
							if (index > -1) {
								formData.notificationTypes.splice(index, 1);
							} else {
								formData.notificationTypes.push('sms');
							}
						}`,
					},
				})
			</div>
		</div>
		// Marketing Consent (Radio)
		<div class="space-y-2">
			<label class="text-sm font-medium">Marketing Preferences</label>
			@components.RadioGroup(components.RadioGroupProps{Name: "contact-method"}) {
				@components.RadioGroupItem(components.RadioGroupItemProps{
					Value:      "all",
					ID:         "marketing-all",
					Name:       "marketing",
					Label:      templ.Raw("All marketing emails"),
					Attributes: templ.Attributes{"x-model": "formData.marketingConsent"},
				})
				@components.RadioGroupItem(components.RadioGroupItemProps{
					Value:      "selected",
					ID:         "marketing-selected",
					Name:       "marketing",
					Label:      templ.Raw("Only selected emails"),
					Attributes: templ.Attributes{"x-model": "formData.marketingConsent"},
				})
				@components.RadioGroupItem(components.RadioGroupItemProps{
					Value:      "none",
					ID:         "marketing-none",
					Name:       "marketing",
					Label:      templ.Raw("No marketing emails"),
					Attributes: templ.Attributes{"x-model": "formData.marketingConsent"},
				})
			}
		</div>
		// Newsletter Toggle
		<div class="space-y-2">
			@components.Toggle(components.ToggleProps{
				ID:         "newsletter",
				Name:       "newsletter",
				LabelRight: "Subscribe to newsletter",
				Attributes: templ.Attributes{
					"x-model": "formData.newsletter",
				},
			})
		</div>
		// Terms Checkbox
		<div class="space-y-2">
			@components.Checkbox(components.CheckboxProps{
				ID:         "terms",
				Name:       "terms",
				Label:      "I accept the terms and conditions",
				Attributes: templ.Attributes{"x-model": "formData.terms"},
			})
		</div>
		// Submit Button
		<div class="pt-4">
			@components.Button(components.ButtonProps{
				Text: "Save Changes",
				Attributes: templ.Attributes{
					"@click": "submit",
				},
			})
		</div>
	}
}

================
File: internals/ui/showcase/icon.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/icons"

templ IconShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Basic Icons</h2>
				<div class="flex flex-wrap gap-2">
					@icons.User(icons.IconProps{Size: "24"})
					@icons.House(icons.IconProps{Size: "24"})
					@icons.Settings(icons.IconProps{Size: "24"})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Colored Icons</h2>
				<div class="flex flex-wrap gap-2">
					@icons.Heart(icons.IconProps{Size: "24", Color: "red"})
					@icons.Star(icons.IconProps{Size: "24", Color: "gold"})
					@icons.Check(icons.IconProps{Size: "24", Color: "green"})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Filled Icons</h2>
				<div class="flex flex-wrap gap-2">
					@icons.Circle(icons.IconProps{Size: "24", Fill: "blue", Stroke: "blue"})
					@icons.Square(icons.IconProps{Size: "24", Fill: "purple", Stroke: "purple"})
					@icons.Triangle(icons.IconProps{Size: "24", Fill: "orange", Stroke: "orange"})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Different Sizes</h2>
				<div class="flex flex-wrap gap-2">
					@icons.House(icons.IconProps{Size: "16"})
					@icons.House(icons.IconProps{Size: "24"})
					@icons.House(icons.IconProps{Size: "32"})
					@icons.House(icons.IconProps{Size: "48"})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Custom Classes</h2>
				<div class="flex flex-wrap gap-2">
					@icons.ArrowRight(icons.IconProps{Size: "24", Class: "text-blue-500 hover:text-blue-700"})
					@icons.ArrowLeft(icons.IconProps{Size: "24", Class: "text-green-500 hover:text-green-700"})
				</div>
			</div>
		</div>
	</div>
}

================
File: internals/ui/showcase/input.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ InputShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Default</h2>
				@components.Input(components.InputProps{
					Type: "email",
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">With Placeholder</h2>
				@components.Input(components.InputProps{
					Type:        "email",
					Placeholder: "e.g. john@doe.com",
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">File</h2>
				<div class="grid w-full max-w-sm items-center gap-1.5">
					@components.Input(components.InputProps{
						Type: "file",
					})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Disabled</h2>
				@components.Input(components.InputProps{
					Type:       "email",
					Attributes: templ.Attributes{"disabled": "true"},
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">With Label</h2>
				<div class="grid w-full max-w-sm items-center gap-1.5">
					@components.Input(components.InputProps{
						ID:    "email",
						Type:  "email",
						Label: "Email",
					})
				</div>
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">With Description</h2>
				@components.Input(components.InputProps{
					ID:          "email",
					Type:        "email",
					Description: "This is your accounts email address.",
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">With Error</h2>
				@components.Input(components.InputProps{
					ID:    "username",
					Error: "Username must be more then 2 characters",
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Advanced</h2>
				@components.Input(components.InputProps{
					ID:          "username",
					Label:       "Username",
					Placeholder: "e.g. john123",
					Description: "This is your public display name.",
					Value:       "",
					Error:       "Username must be more then 2 characters",
				})
			</div>
		</div>
	</div>
}

================
File: internals/ui/showcase/modal.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ ModalShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div>
			@components.ModalTrigger("default-modal") {
				@components.Button(components.ButtonProps{Text: "Open Modal"})
			}
			@components.Modal(components.ModalProps{ID: "default-modal", Class: "max-w-md"}) {
				@components.ModalHeader() {
					Are you absolutely sure?
				}
				@components.ModalBody() {
					This action cannot be undone. This will permanently delete your account and remove your data from our servers.				
				}
				@components.ModalFooter() {
					<div class="flex gap-2">
						@components.ModalClose("default-modal") {
							@components.Button(components.ButtonProps{
								Text: "Cancel",
							})
						}
						@components.ModalClose("default-modal") {
							@components.Button(components.ButtonProps{
								Text:    "Continue",
								Variant: components.Secondary,
							})
						}
					</div>
				}
			}
		</div>
	</div>
}

================
File: internals/ui/showcase/radio_group.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ RadioGroupShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		@components.RadioGroup(components.RadioGroupProps{}) {
			@components.RadioGroupItem(components.RadioGroupItemProps{
				Value:      "default",
				ID:         "r1",
				Name:       "view-mode",
				Label:      templ.Raw("Default"),
				Attributes: templ.Attributes{"checked": true},
			})
			@components.RadioGroupItem(components.RadioGroupItemProps{
				Value:      "comfortable",
				ID:         "r2",
				Name:       "view-mode",
				Label:      templ.Raw("Disabled"),
				Attributes: templ.Attributes{"disabled": true},
			})
			@components.RadioGroupItem(components.RadioGroupItemProps{
				Value: "compact",
				ID:    "r3",
				Name:  "view-mode",
				Label: templ.Raw("Compact"),
			})
		}
	</div>
}

================
File: internals/ui/showcase/select.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

var xxx = "banana"

templ SelectShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div class="w-full max-w-xs space-y-8">
			<div>
				<h2 class="font-semibold mb-4">Default Select</h2>
				@components.Select(components.SelectProps{
					ID:   "fruit",
					Name: "fruit",
					Options: []components.SelectOption{
						{Label: "Apple", Value: "apple"},
						{Label: "Banana", Value: "banana"},
						{Label: "Orange", Value: "orange"},
						{Label: "Mango", Value: "mango"},
					},
				})
			</div>
			<div>
				<h2 class="font-semibold mb-4">With Placeholder</h2>
				@components.Select(components.SelectProps{
					ID:          "fruit",
					Name:        "fruit",
					Placeholder: "Select a fruit",
					Options: []components.SelectOption{
						{Label: "Apple", Value: "apple"},
						{Label: "Banana", Value: "banana"},
						{Label: "Orange", Value: "orange"},
						{Label: "Mango", Value: "mango"},
					},
				})
			</div>
			<div>
				<h2 class="font-semibold mb-4">Selected Value</h2>
				@components.Select(components.SelectProps{
					ID:          "selected",
					Name:        "selected",
					Placeholder: "Select a fruit",
					Options: []components.SelectOption{
						{Label: "Apple", Value: "apple"},
						{Label: "Banana", Value: "banana"},
						{Label: "Orange", Value: "orange", Attributes: templ.Attributes{"selected": true}},
						{Label: "Mango", Value: "mango"},
					},
				})
			</div>
			<div>
				<h2 class="font-semibold mb-4">Disabled Select</h2>
				@components.Select(components.SelectProps{
					ID:          "disabled",
					Name:        "disabled",
					Placeholder: "Select is disabled",
					Attributes:  templ.Attributes{":disabled": "true"},
					Options: []components.SelectOption{
						{Label: "Option 1", Value: "1"},
						{Label: "Option 2", Value: "2"},
					},
				})
			</div>
		</div>
	</div>
}

================
File: internals/ui/showcase/sheet.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

var sides = []components.SheetSide{
	components.Left,
	components.Top,
	components.Right,
	components.Bottom,
}

templ SheetShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div class="flex gap-2">
			for _, side := range sides {
				@components.SheetRoot() {
					@components.Sheet(components.SheetProps{
						Side: side,
					}) {
						<div class="py-4">
							<h3 class="mb-2 text-lg font-medium">Sheet Content</h3>
							<p>This is the main content of the sheet. You can put any components or text here.</p>
						</div>
						<div class="mt-4">
							@components.SheetClose("Close")
						</div>
					}
					@components.SheetTrigger(string(side), side) {
						@components.Button(components.ButtonProps{Text: string(side)})
					}
				}
			}
		</div>
	</div>
}

================
File: internals/ui/showcase/tabs.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ TabsShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		@components.Tabs(components.TabsProps{
			Tabs: []components.Tab{
				{
					ID:      "account",
					Title:   "Account",
					Content: AccountTab(),
				},
				{
					ID:      "password",
					Title:   "Password",
					Content: PasswordTab(),
				},
			},
			TabsContainerClass:    "w-full max-w-xs",
			ContentContainerClass: "w-full max-w-xs",
		})
	</div>
}

templ AccountTab() {
	@components.Card(components.CardProps{}) {
		@components.CardHeader() {
			@components.CardTitle() {
				Account 
			}
			@components.CardDescription() {
				Make changes to your account here. Click save when you're done.
			}
		}
		@components.CardContent() {
			<div class="space-y-2">
				<div class="space-y-1">
					<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label>
					@components.Input(components.InputProps{
						Type:        components.InputTypeText,
						Placeholder: "Name",
						ID:          "name",
						Value:       "John Doe",
					})
				</div>
				<div class="space-y-1">
					<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Username</label>
					@components.Input(components.InputProps{
						Type:        components.InputTypeText,
						Placeholder: "Username",
						ID:          "username",
						Value:       "@johndoe",
					})
				</div>
			</div>
		}
		@components.CardFooter() {
			@components.Button(components.ButtonProps{Text: "Save changes"})
		}
	}
}

templ PasswordTab() {
	@components.Card(components.CardProps{}) {
		@components.CardHeader() {
			@components.CardTitle() {
				Password 
			}
			@components.CardDescription() {
				Change your password here. After saving, you'll be logged out.
			}
		}
		@components.CardContent() {
			<div class="space-y-2">
				<div class="space-y-1">
					<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="current_password">
						Current Password
					</label>
					@components.Input(components.InputProps{
						Type:        components.InputTypePassword,
						Placeholder: "Current Password",
						ID:          "current_password",
					})
				</div>
				<div class="space-y-1">
					<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="new_password">
						New Password
					</label>
					@components.Input(components.InputProps{
						Type:        components.InputTypePassword,
						Placeholder: "New Password",
						ID:          "new_password",
					})
				</div>
			</div>
		}
		@components.CardFooter() {
			@components.Button(components.ButtonProps{Text: "Save password"})
		}
	}
}

================
File: internals/ui/showcase/toggle.templ
================
package showcase

import "github.com/axzilla/goilerplate/pkg/components"

templ ToggleShowcase() {
	<div class="flex justify-center items-center border rounded-md py-16 px-4">
		<div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Without Label</h2>
				@components.Toggle(components.ToggleProps{
					ID:   "toggle",
					Name: "toggle",
				})
			</div>
			<div class="mb-8">
				<h2 class="font-semibold mb-2">Label Placements</h2>
				<div class="flex flex-col gap-2">
					@components.Toggle(components.ToggleProps{
						ID:         "toggle-right",
						Name:       "toggle-right",
						LabelRight: "Label Right",
					})
					@components.Toggle(components.ToggleProps{
						ID:        "toggle-left",
						Name:      "toggle-left",
						LabelLeft: "Label Left",
					})
				</div>
			</div>
			<div>
				<h2 class="font-semibold mb-4">States</h2>
				<div class="flex flex-col gap-2" x-data="{'xxx': ''}">
					@components.Toggle(components.ToggleProps{
						ID:         "toggle-checked",
						Name:       "toggle-checked",
						LabelRight: "Checked Toggle",
						Attributes: templ.Attributes{"x-bind:checked": "true"},
					})
					@components.Toggle(components.ToggleProps{
						ID:         "toggle-disabled",
						Name:       "toggle-disabled",
						LabelRight: "Disabled Toggle",
						Attributes: templ.Attributes{"disabled": "true"},
					})
					@components.Toggle(components.ToggleProps{
						ID:         "toggle-disabled-checked",
						Name:       "toggle-disabled-checked",
						LabelRight: "Disabled Checked Toggle",
						Attributes: templ.Attributes{"checked": "true", "disabled": true},
					})
				</div>
			</div>
		</div>
	</div>
}

================
File: pkg/components/accordion.templ
================
package components

import (
	"github.com/axzilla/goilerplate/pkg/icons"
	"github.com/axzilla/goilerplate/pkg/utils"
)

// AccordionItem represents a single item in the Accordion component.
type AccordionItem struct {
	// ID is the unique identifier for the accordion item.
	// It is used to manage the open/closed state of the item.
	ID string

	// Trigger is the content of the accordion item's header/trigger.
	// This is typically text, but can be any templ.Component.
	Trigger templ.Component

	// Content is the expandable content of the accordion item.
	// This can be any templ.Component.
	Content templ.Component
}

// AccordionProps defines the properties for the Accordion component.
type AccordionProps struct {
	// Items is a slice of AccordionItem structs representing each item in the accordion.
	Items []AccordionItem

	// Class specifies additional CSS classes to apply to the accordion container.
	// Default: "" (empty string)
	Class string

	// Attributes allows passing additional HTML attributes to the accordion container element.
	// Default: nil
	Attributes templ.Attributes
}

// Accordion renders an accordion component based on the provided props.
// It uses Alpine.js for interactivity and state management.
//
// Usage:
//
//	@components.Accordion(components.AccordionProps{
//	  Items: []components.AccordionItem{
//	    {
//	      ID: "item-1",
//	      Trigger: templ.Raw("Is it accessible?"),
//	      Content: templ.Raw("Yes. It adheres to the WAI-ARIA design pattern."),
//	    },
//	    {
//	      ID: "item-2",
//	      Trigger: templ.Raw("Is it styled?"),
//	      Content: templ.Raw("Yes. It comes with default styles that match the other components' aesthetic."),
//	    },
//	  },
//	  Class: "w-full sm:max-w-[70%]",
//	  Attributes: templ.Attributes{"data-testid": "my-accordion"},
//	})
//
// Props:
//   - Items: A slice of AccordionItem structs, each representing an item in the accordion.
//   - Class: Additional CSS classes to apply to the accordion container. Default: "" (empty string)
//   - Attributes: Additional HTML attributes to apply to the accordion container element. Default: nil
templ Accordion(props AccordionProps) {
	<div
		x-data="{ 
			activeItem: null,
			toggleItem(itemId) {
				this.activeItem = this.activeItem === itemId ? null : itemId;
			}
		}"
		class={ utils.TwMerge("divide-y divide-border rounded-md border", props.Class) }
		{ props.Attributes... }
	>
		for _, item := range props.Items {
			<div class="group">
				<h3>
					<button
						type="button"
						@click={ "toggleItem('" + item.ID + "')" }
						class="flex w-full items-center justify-between py-4 px-5 text-left font-medium transition-all hover:underline [&[aria-expanded=true]>svg]:rotate-180"
						:aria-expanded={ "activeItem === '" + item.ID + "'" }
					>
						@item.Trigger
						@icons.ChevronDown(icons.IconProps{Size: "16"})
					</button>
				</h3>
				<div
					x-show={ "activeItem === '" + item.ID + "'" }
					x-collapse
					x-cloak
					class="px-5 pb-4 pt-0"
				>
					@item.Content
				</div>
			</div>
		}
	</div>
}

================
File: pkg/components/alert.templ
================
package components

import "github.com/axzilla/goilerplate/pkg/utils"

// AlertVariant represents the visual style of the alert.
type AlertVariant string

// Constants for alert variants.
const (
	DefaultAlert     AlertVariant = "default"
	DestructiveAlert AlertVariant = "destructive"
)

// AlertProps defines the properties for the Alert component.
type AlertProps struct {
	// Variant determines the visual style of the alert.
	// Default: DefaultAlert
	Variant AlertVariant
	// Class specifies additional CSS classes to apply to the alert.
	// Default: "" (empty string)
	Class string
}

// getAlertVariantClasses returns the CSS classes for the given alert variant.
func getAlertVariantClasses(variant AlertVariant) string {
	switch variant {
	case DestructiveAlert:
		return "border-destructive text-destructive"
	default:
		return "border-border text-foreground"
	}
}

// Alert renders an alert component based on the provided props and children.
// It can be customized with two visual styles: Default and Destructive.
// All content, including icons, should be passed in as children.
//
// Usage:
//
//	@components.Alert(components.AlertProps{Variant: components.DestructiveAlert}) {
//	  @components.ExclamationTriangleIcon()
//	  @components.AlertTitle{"Error"}
//	  @components.AlertDescription{"Your session has expired. Please log in again."}
//	}
//
// Props:
//   - Variant: The visual style of the alert (DefaultAlert or DestructiveAlert). Default: DefaultAlert
//   - Class: Additional CSS classes to apply to the alert. Default: "" (empty string)
templ Alert(props AlertProps) {
	<div
		class={
			utils.TwMerge(
				"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
				getAlertVariantClasses(props.Variant),
				props.Class,
			),
		}
		role="alert"
	>
		{ children... }
	</div>
}

// AlertTitle renders the title of the alert.
templ AlertTitle() {
	<h5 class="mb-1 font-medium leading-none tracking-tight">
		{ children... }
	</h5>
}

// AlertDescription renders the description of the alert.
templ AlertDescription() {
	<div class="text-sm [&_p]:leading-relaxed">
		{ children... }
	</div>
}

================
File: pkg/components/avatar.templ
================
package components

import (
	"fmt"
	"github.com/axzilla/goilerplate/pkg/utils"
	"strings"
)

// AvatarSize represents the size of the avatar.
type AvatarSize string

const (
	AvatarSizeSmall  AvatarSize = "small"
	AvatarSizeMedium AvatarSize = "medium"
	AvatarSizeLarge  AvatarSize = "large"
)

// AvatarProps defines the properties for the Avatar component.
type AvatarProps struct {
	// ImageSrc is the URL of the avatar image.
	// If empty, initials will be used.
	ImageSrc string

	// Name is used to generate initials if ImageSrc is empty.
	Name string

	// Size determines the size of the avatar.
	// Default: AvatarSizeMedium
	Size AvatarSize

	// Class specifies additional CSS classes to apply to the avatar.
	Class string

	// Attributes allows passing additional HTML attributes to the avatar element.
	Attributes templ.Attributes
}

// getInitials generates initials from the given name.
func AvatarInitials(name string) string {
	parts := strings.Fields(name)
	initials := ""
	for i, part := range parts {
		if i > 1 {
			break
		}
		if len(part) > 0 {
			initials += string(part[0])
		}
	}
	return strings.ToUpper(initials)
}

// getSizeClasses returns the CSS classes for the given avatar size.
func AvatarSizeClasses(size AvatarSize) string {
	switch size {
	case AvatarSizeSmall:
		return "w-8 h-8 text-xs"
	case AvatarSizeLarge:
		return "w-16 h-16 text-xl"
	default:
		return "w-12 h-12 text-base"
	}
}

// Avatar renders an avatar component based on the provided props.
// It displays an image if ImageSrc is provided, otherwise it shows initials.
//
// Usage:
//
//	@components.Avatar(components.AvatarProps{
//	  ImageSrc: "https://example.com/avatar.jpg",
//	  Name: "John Doe",
//	  Size: components.AvatarSizeMedium,
//	  Class: "border-2 border-blue-500",
//	})
//
// Props:
//   - ImageSrc: The URL of the avatar image. Default: "" (empty string)
//   - Name: The name used to generate initials if ImageSrc is empty. Default: "" (empty string)
//   - Size: The size of the avatar (AvatarSizeSmall, AvatarSizeMedium, AvatarSizeLarge). Default: AvatarSizeMedium
//   - Class: Additional CSS classes to apply to the avatar. Default: "" (empty string)
//   - Attributes: Additional HTML attributes to apply to the avatar element. Default: nil
templ Avatar(props AvatarProps) {
	<div
		class={
			utils.TwMerge(
				"inline-flex items-center justify-center rounded-full bg-muted",
				AvatarSizeClasses(props.Size),
				props.Class,
			),
		}
		{ props.Attributes... }
	>
		if props.ImageSrc != "" {
			<img
				src={ props.ImageSrc }
				alt={ fmt.Sprintf("%s's avatar", props.Name) }
				class="w-full h-full object-cover rounded-full"
			/>
		} else {
			<span class="font-medium text-muted-foreground">
				{ AvatarInitials(props.Name) }
			</span>
		}
	</div>
}

================
File: pkg/components/button.templ
================
package components

import (
	"github.com/axzilla/goilerplate/pkg/utils"
	"strings"
)

// ButtonVariant represents the visual style of the button.
type ButtonVariant string

// ButtonSize represents the size of the button.
type ButtonSize string

// Constants for button variants and sizes.
const (
	Default     ButtonVariant = "default"
	Destructive ButtonVariant = "destructive"
	Outline     ButtonVariant = "outline"
	Secondary   ButtonVariant = "secondary"
	Ghost       ButtonVariant = "ghost"
	Link        ButtonVariant = "link"

	Md         ButtonSize = "md"
	Sm         ButtonSize = "sm"
	Lg         ButtonSize = "lg"
	ButtonIcon ButtonSize = "icon"
)

// Button defines the properties for the Button component.
type ButtonProps struct {
	// Class specifies additional CSS classes to apply to the button.
	// Default: "" (empty string)
	Class string

	// Text is the content of the button.
	// Default: "" (empty string)
	Text string

	// Variant determines the visual style of the button.
	// Default: Default
	Variant ButtonVariant

	// Size sets the size of the button.
	// Default: Md
	Size ButtonSize

	// FullWidth determines whether the button should take up the full width of its container.
	// Default: false
	FullWidth bool

	// Href, if provided, renders the button as an anchor tag with this URL.
	// Default: "" (empty string)
	Href string

	// Target specifies the target attribute for the anchor tag (only used when Href is provided).
	// Default: "" (empty string)
	Target string

	// Disabled can be either a bool or a string.
	// If bool (Go), it directly controls the disabled state.
	// If string, it's treated as a JavaScript expression for dynamic disabling.
	Disabled any

	// Type specifies the type of the button. Default: "button"
	// Default: "" (empty string)
	Type string

	// Attributes allows passing additional HTML attributes to the button or anchor element.
	// Default: nil
	Attributes templ.Attributes

	// IconLeft specifies an icon component to be displayed on the left side of the button text.
	// Default: nil
	IconLeft templ.Component

	// IconRight specifies an icon component to be displayed on the right side of the button text.
	// Default: nil
	IconRight templ.Component
}

// Variant als Methode
func (b ButtonProps) variantClasses() string {
	switch b.Variant {
	case Destructive:
		return "bg-destructive text-destructive-foreground hover:bg-destructive/90"
	case Outline:
		return "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
	case Secondary:
		return "bg-secondary text-secondary-foreground hover:bg-secondary/80"
	case Ghost:
		return "hover:bg-accent hover:text-accent-foreground"
	case Link:
		return "text-primary underline-offset-4 hover:underline"
	default:
		return "bg-primary text-primary-foreground hover:bg-primary/90"
	}
}

// Size als Methode
func (b ButtonProps) sizeClasses() string {
	switch b.Size {
	case Sm:
		return "h-9 px-3 rounded-md"
	case Lg:
		return "h-11 px-8 rounded-md"
	case ButtonIcon:
		return "h-10 w-10"
	default:
		return "h-10 px-4 py-2 rounded-md"
	}
}

func (b ButtonProps) modifierClasses() string {
	classes := []string{}
	if b.FullWidth {
		classes = append(classes, "w-full")
	}
	return strings.Join(classes, " ")
}

// Button renders a button or anchor component based on the provided props.
// It can be customized with various visual styles, sizes, and behaviors.
//
// Usage:
//
//	@components.Button(components.ButtonProps{
//	  Text: "Click me",
//	  Variant: components.Primary,
//	  Size: components.Md,
//	  FullWidth: false,
//	  IconLeft: components.Icon(components.IconProps{Name: "user"}),
//	  IconRight: components.Icon(components.IconProps{Name: "arrow-right"}),
//	  Attributes: templ.Attributes{
//	    "aria-label": "Click this button",
//	    "data-testid": "main-button",
//	  },
//	})
//
// Props:
//   - Class: Additional CSS classes to apply to the button. Default: "" (empty string)
//   - Text: The text content of the button. Default: "" (empty string)
//   - Variant: The visual style of the button (e.g., Default, Destructive, Outline). Default: Default
//   - Size: The size of the button (Md, Sm, Lg, Icon). Default: Md
//   - FullWidth: Whether the button should take up the full width of its container. Default: false
//   - Href: If provided, renders the button as an anchor tag with this URL. Default: "" (empty string)
//   - Target: The target attribute for the anchor tag (only used when Href is provided). Default: "" (empty string)
//   - Disabled: Can be either a bool or a string. If bool (Go), it directly controls the disabled state. If string, it's treated as a JavaScript expression for dynamic disabling. Default: nil
//   - Type: The type of the button. Default: "button"
//   - Attributes: Additional HTML attributes to apply to the button or anchor element. Default: nil
//   - IconLeft: An icon component to be displayed on the left side of the button text. Default: nil
//   - IconRight: An icon component to be displayed on the right side of the button text. Default: nil
templ Button(props ButtonProps) {
	if props.Href != "" {
		<a
			href={ templ.SafeURL(props.Href) }
			target={ props.Target }
			class={
				utils.TwMerge(
					"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
					props.variantClasses(),
					props.sizeClasses(),
					props.modifierClasses(),
					props.Class,
				),
			}
			if props.Disabled != nil {
				if disabledBool, ok := props.Disabled.(bool); ok && disabledBool {
					aria-disabled="true"
				}
				if disabledStr, ok := props.Disabled.(string); ok {
					:aria-disabled={ disabledStr }
				}
			}
			{ props.Attributes... }
		>
			{ children... }
			@renderButtonContent(props)
		</a>
	} else {
		<button
			class={
				utils.TwMerge(
					"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
					"focus-visible:outline-none focus-visible:ring-2 focus-ring-ring focus-visible:ring-offset-2",
					"disabled:pointer-events-none disabled:opacity-50",
					props.variantClasses(),
					props.sizeClasses(),
					props.modifierClasses(),
					props.Class,
				),
			}
			if props.Type != "" {
				type={ props.Type }
			}
			if props.Disabled != nil {
				if disabledBool, ok := props.Disabled.(bool); ok {
					disabled?={ disabledBool }
				}
				if disabledStr, ok := props.Disabled.(string); ok {
					:disabled={ disabledStr }
				}
			}
			{ props.Attributes... }
		>
			{ children... }
			@renderButtonContent(props)
		</button>
	}
}

// renderButtonContent renders the content of the button, including icons and text
templ renderButtonContent(props ButtonProps) {
	<span class="flex gap-2 items-center">
		if props.IconLeft != nil {
			@props.IconLeft
		}
		{ props.Text }
		if props.IconRight != nil {
			@props.IconRight
		}
	</span>
}

================
File: pkg/components/card.templ
================
package components

import "github.com/axzilla/goilerplate/pkg/utils"

// CardProps defines the properties for the Card component.
type CardProps struct {
	// Class specifies additional CSS classes to apply to the card.
	// Default: "" (empty string)
	Class string

	// Attributes allows passing additional HTML attributes to the card element.
	// Default: nil
	Attributes templ.Attributes
}

// Card renders a card component based on the provided props.
// It can be customized with additional classes and attributes.
//
// Usage:
//
//	@components.Card(components.CardProps{
//	  Class: "custom-card",
//	  Attributes: templ.Attributes{"data-testid": "my-card"},
//	}) {
//	  // Card content goes here
//	}
//
// Props:
//   - Class: Additional CSS classes to apply to the card. Default: "" (empty string)
//   - Attributes: Additional HTML attributes to apply to the card element. Default: nil
templ Card(props CardProps) {
	<div
		class={ utils.TwMerge("rounded-lg border bg-card text-card-foreground shadow-sm", props.Class) }
		{ props.Attributes... }
	>
		{ children... }
	</div>
}

// CardHeader renders the header section of a card.
//
// Usage:
//
//	@components.CardHeader() {
//	  @components.CardTitle() { Card Title }
//	  @components.CardDescription() { Card description goes here }
//	}
templ CardHeader() {
	<div class="flex flex-col space-y-1.5 p-6">
		{ children... }
	</div>
}

// CardTitle renders the title of a card.
//
// Usage:
//
//	@components.CardTitle() {
//	  My Card Title
//	}
templ CardTitle() {
	<h3 class="font-semibold leading-none tracking-tight">
		{ children... }
	</h3>
}

// CardDescription renders the description of a card.
//
// Usage:
//
//	@components.CardDescription() {
//	  This is a detailed description of the card's content.
//	}
templ CardDescription() {
	<p class="text-sm text-muted-foreground">
		{ children... }
	</p>
}

// CardContent renders the main content section of a card.
//
// Usage:
//
//	@components.CardContent() {
//	  // Main card content goes here
//	}
templ CardContent() {
	<div class="p-6 pt-0">
		{ children... }
	</div>
}

// CardFooter renders the footer section of a card.
//
// Usage:
//
//	@components.CardFooter() {
//	  @components.Button(components.ButtonProps{Text: "Submit"})
//	}
templ CardFooter() {
	<div class="flex items-center p-6 pt-0">
		{ children... }
	</div>
}

================
File: pkg/components/checkbox.templ
================
package components

import "github.com/axzilla/goilerplate/pkg/utils"
import "github.com/axzilla/goilerplate/pkg/icons"

// CheckboxProps defines the properties for the Checkbox component.
type CheckboxProps struct {
	// ID is the unique identifier for the checkbox input.
	ID string

	// Name is the name attribute for the checkbox input.
	Name string

	// Value is the value attribute for the checkbox input.
	Value string

	// Label is the text label associated with the checkbox.
	// If empty, no label will be rendered.
	Label string

	// Class specifies additional CSS classes for the container
	Class string

	// Attributes allows passing additional HTML attributes
	Attributes templ.Attributes
}

// Checkbox renders a customizable checkbox component with an associated label.
//
// Props:
//   - ID: The unique identifier for the checkbox input. Required.
//   - Name: The name attribute for the checkbox input. Required.
//   - Value: The value attribute for the checkbox input. Required.
//   - Label: The text label associated with the checkbox. Optional.
//   - Class: Additional CSS classes to apply to the checkbox container. Optional.
//   - Attributes: Additional HTML attributes to apply to the checkbox input element. Optional.
// CheckboxProps bleibt gleich, nur die Template-Implementierung ändert sich
templ Checkbox(props CheckboxProps) {
	<label
		for={ props.ID }
		class={ utils.TwMerge(
            "flex cursor-pointer items-center gap-2 text-sm font-medium",
            "text-muted-foreground [&:has(input:checked)]:text-foreground",
            "[&:has(input:disabled)]:opacity-50 [&:has(input:disabled)]:cursor-not-allowed",
            props.Class,
        ) }
	>
		<div class="relative flex items-center">
			<input
				id={ props.ID }
				name={ props.Name }
				value={ props.Value }
				type="checkbox"
				class="before:content[''] peer relative size-4 cursor-pointer appearance-none overflow-hidden 
                       rounded-sm border border-2 border-primary
                       bg-background before:absolute before:inset-0 
                       checked:before:bg-primary
                       focus:outline focus:outline-2 focus:outline-offset-2 
                       focus:outline-ring checked:focus:outline-primary 
                       active:outline-offset-0 
                       disabled:cursor-not-allowed
                       transition-colors"
				{ props.Attributes... }
			/>
			<div
				class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 
                        -translate-x-1/2 -translate-y-1/2 text-primary-foreground 
                        peer-checked:visible"
			>
				@icons.Check(icons.IconProps{Size: "12"})
			</div>
		</div>
		if props.Label != "" {
			<span>{ props.Label }</span>
		}
	</label>
}

================
File: pkg/components/datepicker.templ
================
package components

import (
	"github.com/axzilla/goilerplate/pkg/icons"
	"github.com/axzilla/goilerplate/pkg/utils"
)

// DatepickerProps defines the properties for the Datepicker component.
type DatepickerProps struct {
	// ID is the unique identifier for the datepicker input.
	ID string

	// Name is the name attribute for the datepicker input.
	Name string

	// Placeholder is the placeholder text for the datepicker input.
	Placeholder string

	// Format specifies the date format to use. Options: "M d, Y", "MM-DD-YYYY", "DD-MM-YYYY", "YYYY-MM-DD", "D d M, Y"
	// Default: "M d, Y"
	Format string

	// Class specifies additional CSS classes to apply to the datepicker container.
	Class string

	// Attributes allows passing additional HTML attributes to the datepicker input element.
	Attributes templ.Attributes
}

// Datepicker renders an enhanced datepicker component with an input field and a calendar view.
// It uses Alpine.js for interactivity and provides various formatting options and improved navigation.
// This version supports dark mode using Tailwind CSS variables.
//
// Usage:
//
//	@components.Datepicker(components.DatepickerProps{
//	  ID:          "my-datepicker",
//	  Name:        "selected-date",
//	  Placeholder: "Select a date",
//	  Format:      "YYYY-MM-DD",
//	  Class:       "w-full",
//	})
//
// Props:
//   - ID: The unique identifier for the datepicker input. Default: "" (empty string)
//   - Name: The name attribute for the datepicker input. Default: "" (empty string)
//   - Placeholder: The placeholder text for the datepicker input. Default: "" (empty string)
//   - Format: The date format to use. Default: "M d, Y"
//   - Class: Additional CSS classes to apply to the datepicker container. Default: "" (empty string)
//   - Attributes: Additional HTML attributes to apply to the datepicker input element. Default: nil
templ Datepicker(props DatepickerProps) {
	<div
		data-date-format={ props.Format }
		x-data="{
      datePickerOpen: false,
      datePickerValue: '',
      datePickerFormat: $el.getAttribute('data-date-format'),
      datePickerMonth: '',
      datePickerYear: '',
      datePickerDay: '',
      datePickerDaysInMonth: [],
      datePickerBlankDaysInMonth: [],
      datePickerMonthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datePickerDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      position: 'bottom',
      toggleDatePicker() {
          this.datePickerOpen = !this.datePickerOpen;
          if (this.datePickerOpen) {
              this.$nextTick(() => this.updatePosition());
          }
      },
      updatePosition() {
          const trigger = this.$refs.datePickerInput;
          const popup = this.$refs.datePickerPopup;
          const rect = trigger.getBoundingClientRect();
          const popupRect = popup.getBoundingClientRect();
          const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
          
          if (rect.bottom + popupRect.height > viewportHeight && rect.top > popupRect.height) {
              this.position = 'top';
          } else {
              this.position = 'bottom';
          }
      },
      datePickerDayClicked(day) {
        let selectedDate = new Date(this.datePickerYear, this.datePickerMonth, day);
        this.datePickerDay = day;
        this.datePickerValue = this.datePickerFormatDate(selectedDate);
        this.datePickerIsSelectedDate(day);
        this.datePickerOpen = false;
      },
      datePickerPreviousMonth(){
        if (this.datePickerMonth == 0) { 
            this.datePickerYear--; 
            this.datePickerMonth = 11; 
        } else {
            this.datePickerMonth--;
        }
        this.datePickerCalculateDays();
      },
      datePickerNextMonth(){
        if (this.datePickerMonth == 11) { 
            this.datePickerMonth = 0; 
            this.datePickerYear++; 
        } else { 
            this.datePickerMonth++; 
        }
        this.datePickerCalculateDays();
      },
      datePickerIsSelectedDate(day) {
        const d = new Date(this.datePickerYear, this.datePickerMonth, day);
        return this.datePickerValue === this.datePickerFormatDate(d) ? true : false;
      },
      datePickerIsToday(day) {
        const today = new Date();
        const d = new Date(this.datePickerYear, this.datePickerMonth, day);
        return today.toDateString() === d.toDateString() ? true : false;
      },
      datePickerCalculateDays() {
        let daysInMonth = new Date(this.datePickerYear, this.datePickerMonth + 1, 0).getDate();
        let dayOfWeek = new Date(this.datePickerYear, this.datePickerMonth).getDay();
        let blankdaysArray = [];
        for (var i = 1; i <= dayOfWeek; i++) {
            blankdaysArray.push(i);
        }
        let daysArray = [];
        for (var i = 1; i <= daysInMonth; i++) {
            daysArray.push(i);
        }
        this.datePickerBlankDaysInMonth = blankdaysArray;
        this.datePickerDaysInMonth = daysArray;
      },
      datePickerFormatDate(date) {
        let formattedDay = this.datePickerDays[date.getDay()];
        let formattedDate = ('0' + date.getDate()).slice(-2);
        let formattedMonth = this.datePickerMonthNames[date.getMonth()];
        let formattedMonthShortName = this.datePickerMonthNames[date.getMonth()].substring(0, 3);
        let formattedMonthInNumber = ('0' + (parseInt(date.getMonth()) + 1)).slice(-2);
        let formattedYear = date.getFullYear();

        if (this.datePickerFormat === 'M d, Y') {
          return `${formattedMonthShortName} ${formattedDate}, ${formattedYear}`;
        }
        if (this.datePickerFormat === 'MM-DD-YYYY') {
          return `${formattedMonthInNumber}-${formattedDate}-${formattedYear}`;
        }
        if (this.datePickerFormat === 'DD-MM-YYYY') {
          return `${formattedDate}-${formattedMonthInNumber}-${formattedYear}`;
        }
        if (this.datePickerFormat === 'YYYY-MM-DD') {
          return `${formattedYear}-${formattedMonthInNumber}-${formattedDate}`;
        }
        if (this.datePickerFormat === 'D d M, Y') {
          return `${formattedDay} ${formattedDate} ${formattedMonthShortName} ${formattedYear}`;
        }
        
        return `${formattedMonth} ${formattedDate}, ${formattedYear}`;
      },
    }"
		x-init="
        currentDate = new Date();
        datePickerMonth = currentDate.getMonth();
        datePickerYear = currentDate.getFullYear();
        datePickerDay = currentDate.getDate();
        datePickerValue = datePickerFormatDate(currentDate);
        datePickerCalculateDays();
    "
		class={ utils.TwMerge("relative", props.Class) }
		@resize.window="if (datePickerOpen) updatePosition()"
	>
		<div class="relative">
			<input
				type="text"
				id={ props.ID }
				name={ props.Name }
				placeholder={ props.Placeholder }
				x-modelable="datePickerValue"
				@click="toggleDatePicker()"
				x-on:keydown.escape="datePickerOpen = false"
				x-ref="datePickerInput"
				class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
				readonly
				{ props.Attributes... }
			/>
			<div
				@click="toggleDatePicker()"
				class="absolute top-0 right-0 px-3 py-2 cursor-pointer text-muted-foreground hover:text-foreground"
			>
				@icons.Calendar(icons.IconProps{})
			</div>
		</div>
		<div
			x-show="datePickerOpen"
			x-transition:enter="transition ease-out duration-100"
			x-transition:enter-start="transform opacity-0 scale-95"
			x-transition:enter-end="transform opacity-100 scale-100"
			x-transition:leave="transition ease-in duration-75"
			x-transition:leave-start="transform opacity-100 scale-100"
			x-transition:leave-end="transform opacity-0 scale-95"
			@click.away="datePickerOpen = false"
			x-ref="datePickerPopup"
			:class="{
                'top-full mt-1': position === 'bottom',
                'bottom-full mb-1': position === 'top'
            }"
			class="absolute left-0 z-50 w-64 p-4 mt-1 antialiased bg-popover text-popover-foreground border rounded-lg shadow border-border"
		>
			<div class="flex items-center justify-between mb-2">
				<div>
					<span x-text="datePickerMonthNames[datePickerMonth]" class="text-lg font-bold"></span>
					<span x-text="datePickerYear" class="ml-1 text-lg font-normal text-muted-foreground"></span>
				</div>
				<div>
					<button @click="datePickerPreviousMonth()" type="button" class="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground">
						@icons.ChevronLeft(icons.IconProps{Size: "16", Class: "text-muted-foreground"})
					</button>
					<button @click="datePickerNextMonth()" type="button" class="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground">
						@icons.ChevronRight(icons.IconProps{Size: "16", Class: "text-muted-foreground"})
					</button>
				</div>
			</div>
			<div class="grid grid-cols-7 mb-3">
				<template x-for="(day, index) in datePickerDays" :key="index">
					<div class="px-0.5">
						<div x-text="day" class="text-xs font-medium text-center text-muted-foreground"></div>
					</div>
				</template>
			</div>
			<div class="grid grid-cols-7">
				<template x-for="blankDay in datePickerBlankDaysInMonth">
					<div class="p-1 text-sm text-center border border-transparent"></div>
				</template>
				<template x-for="(day, dayIndex) in datePickerDaysInMonth" :key="dayIndex">
					<div class="px-0.5 mb-1 aspect-square">
						<div
							x-text="day"
							@click="datePickerDayClicked(day)"
							:class="{
                'bg-muted text-muted-foreground': datePickerIsToday(day) == true, 
                'text-foreground hover:bg-accent hover:text-accent-foreground': datePickerIsToday(day) == false && datePickerIsSelectedDate(day) == false,
                'bg-primary text-primary-foreground hover:bg-primary/90': datePickerIsSelectedDate(day) == true
              }"
							class="flex items-center justify-center text-sm leading-none text-center rounded-full cursor-pointer h-7 w-7"
						></div>
					</div>
				</template>
			</div>
		</div>
	</div>
}

================
File: pkg/components/dropdown_menu.templ
================
package components

import (
	"fmt"
	"github.com/axzilla/goilerplate/pkg/icons"
	"github.com/axzilla/goilerplate/pkg/utils"
	"strings"
)

// DropdownMenuItem represents an item in the dropdown menu
type DropdownMenuItem struct {
	Label     string             // The text to display for the menu item
	Value     string             // The value associated with the menu item (for non-link items)
	Href      string             // The URL to navigate to if the item is a link
	Target    string             // The target attribute for link items (e.g., "_blank" for new tab)
	IconLeft  templ.Component    // An optional icon component to display on the left side of the item
	IconRight templ.Component    // An optional icon component to display on the right side of the item
	SubItems  []DropdownMenuItem // A slice of DropdownMenuItems for nested submenus
	Disabled  bool               // Whether the item is disabled or not
	// Attributes allows passing additional HTML attributes to the accordion container element.
	// Default: nil
	Attributes templ.Attributes
}

// DropdownMenuProps defines the properties for the DropdownMenu component
type DropdownMenuProps struct {
	Items    []DropdownMenuItem // The list of items to display in the dropdown menu
	Trigger  templ.Component    // An optional custom trigger component (default is a button if not provided)
	Class    string             // Additional CSS classes to apply to the root element
	Position string             // The preferred position of the dropdown ("left", "right", "top", or "bottom")
}

func (d DropdownMenuItem) ModifierClasses() string {
	classes := []string{}
	if d.Disabled {
		classes = append(classes, "text-muted-foreground cursor-not-allowed")
	} else {
		classes = append(classes, "text-foreground hover:bg-accent hover:text-accent-foreground")
	}
	return strings.Join(classes, " ")
}

// renderMenuItem is a helper function to render a single menu item
// It handles rendering of regular items, links, and submenus recursively
templ renderMenuItem(item DropdownMenuItem, index int, depth int) {
	if len(item.SubItems) > 0 {
		<div class="relative group">
			<button
				class={
					utils.TwMerge(
						"w-full text-left flex items-center justify-between px-4 py-2 text-sm",
						item.ModifierClasses(),
					),
				}
				role="menuitem"
				tabindex="-1"
				id={ fmt.Sprintf("menu-item-%d", index) }
				aria-haspopup="true"
				aria-expanded="false"
				disabled?={ item.Disabled }
				{ item.Attributes... }
			>
				<span class="flex items-center gap-2">
					if item.IconLeft != nil {
						@item.IconLeft
					}
					{ item.Label }
				</span>
				if item.IconRight != nil {
					@item.IconRight
				} else {
					@icons.ChevronRight(icons.IconProps{Size: "16"})
				}
			</button>
			if depth < 3 {
				<div class="absolute left-full top-0 hidden group-hover:block">
					<div class="py-1 bg-popover rounded-md shadow-lg border border-border">
						for subIndex, subItem := range item.SubItems {
							@renderMenuItem(subItem, subIndex, depth+1)
						}
					</div>
				</div>
			}
		</div>
	} else if item.Href != "" {
		<a
			href={ templ.SafeURL(item.Href) }
			target={ item.Target }
			class={
				"block px-4 py-2 text-sm flex items-center",
				templ.KV("text-foreground hover:bg-accent hover:text-accent-foreground", !item.Disabled),
				templ.KV("text-muted-foreground cursor-not-allowed", item.Disabled),
			}
			role="menuitem"
			tabindex="-1"
			id={ fmt.Sprintf("menu-item-%d", index) }
			{ item.Attributes... }
		>
			<span class="flex items-center gap-2">
				if item.IconLeft != nil {
					@item.IconLeft
				}
				{ item.Label }
			</span>
			if item.IconRight != nil {
				<span class="ml-auto">
					@item.IconRight
				</span>
			}
		</a>
	} else {
		<button
			class={
				"w-full text-left flex items-center justify-between px-4 py-2 text-sm",
				templ.KV("text-foreground hover:bg-accent hover:text-accent-foreground", !item.Disabled),
				templ.KV("text-muted-foreground cursor-not-allowed", item.Disabled),
			}
			role="menuitem"
			tabindex="-1"
			id={ fmt.Sprintf("menu-item-%d", index) }
			disabled?={ item.Disabled }
			{ item.Attributes... }
		>
			<span class="flex items-center gap-2">
				if item.IconLeft != nil {
					@item.IconLeft
				}
				{ item.Label }
			</span>
			if item.IconRight != nil {
				@item.IconRight
			}
		</button>
	}
}

// DropdownMenu renders an enhanced dropdown menu component
// It can be customized with various styles, positions, and behaviors.
//
// Usage:
//
//	@components.DropdownMenu(components.DropdownMenuProps{
//	  Trigger: components.Button(components.ButtonProps{
//	    Text: "Open Menu",
//	    IconRight: components.Icon(components.IconProps{Name: "chevron-down"}),
//	  }),
//	  Position: "bottom",
//	  Items: []components.DropdownMenuItem{
//	    {Label: "Option 1", Value: "opt1"},
//	    {Label: "Option 2", Value: "opt2", IconLeft: components.Icon(components.IconProps{Name: "settings"})},
//	    {Label: "Submenu", SubItems: []components.DropdownMenuItem{
//	      {Label: "Sub Option 1", Value: "sub1"},
//	      {Label: "Sub Option 2", Value: "sub2"},
//	    }},
//	  },
//	})
//
// Props:
//   - Items: Slice of DropdownMenuItem, defining the content of the dropdown
//   - Trigger: Custom component to trigger the dropdown (optional, default is a basic button)
//   - Class: Additional CSS classes to apply to the root element
//   - Position: Preferred position of the dropdown ("left", "right", "top", or "bottom")
//   - Attributes: Additional HTML attributes to apply to the accordion container element. Default: nil
//
// Features:
//   - Supports nested submenus up to 3 levels deep
//   - Automatically adjusts position based on available space
//   - Supports custom icons for menu items
//   - Handles disabled states for menu items
//   - Uses Tailwind CSS for styling, including dark mode support
//   - Implements keyboard navigation and ARIA attributes for accessibility
templ DropdownMenu(props DropdownMenuProps) {
	<div
		x-data="{ 
			open: false,
			position: $el.dataset.position,
			verticalPosition: 'bottom',
			updatePosition() {
				const menu = this.$refs.menu;
				const rect = menu.getBoundingClientRect();
				const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
				const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
				
				if (this.position === 'left' && rect.left < 0) {
					this.position = 'right';
				} else if (this.position !== 'left' && rect.right > viewportWidth) {
					this.position = 'left';
				}

				if (this.verticalPosition === 'bottom' && rect.bottom > viewportHeight) {
					this.verticalPosition = 'top';
				} else if (this.verticalPosition === 'top' && rect.top < 0) {
					this.verticalPosition = 'bottom';
				}
			}
		}"
		@resize.window="if (open) updatePosition()"
		class={ utils.TwMerge("relative inline-block text-left", props.Class) }
		data-position={ props.Position }
	>
		<div @click="open = !open; if(open) $nextTick(() => updatePosition())">
			if props.Trigger != nil {
				@props.Trigger
			} else {
				@Button(ButtonProps{
					Text:      "Options",
					Variant:   "outline",
					IconRight: icons.ChevronDown(icons.IconProps{Size: "16"}),
				})
			}
		</div>
		<div
			x-ref="menu"
			x-show="open"
			@click.away="open = false"
			@keydown.escape.window="open = false"
			x-transition:enter="transition ease-out duration-100"
			x-transition:enter-start="transform opacity-0 scale-95"
			x-transition:enter-end="transform opacity-100 scale-100"
			x-transition:leave="transition ease-in duration-75"
			x-transition:leave-start="transform opacity-100 scale-100"
			x-transition:leave-end="transform opacity-0 scale-95"
			class={
				"absolute z-50 mt-2 w-56 rounded-md shadow-lg bg-popover ring-1 ring-black ring-opacity-5 focus:outline-none",
				"border border-border",
			}
			:class="{
				'right-0': position === 'left',
				'left-0': position !== 'left',
				'bottom-full mb-2': verticalPosition === 'top',
				'top-full mt-2': verticalPosition === 'bottom'
			}"
			role="menu"
			aria-orientation="vertical"
			aria-labelledby="dropdown-menu-button"
			tabindex="-1"
		>
			<div class="py-1" role="none">
				for index, item := range props.Items {
					@renderMenuItem(item, index, 0)
				}
			</div>
		</div>
	</div>
}

================
File: pkg/components/embed.go
================
package components

import "embed"

//go:embed *.templ
var TemplFiles embed.FS

================
File: pkg/components/footer.templ
================
package components

import "time"
import "fmt"

templ Footer() {
	<footer class="py-4 text-center text-sm text-muted-foreground border-t">
		<div class="container">
			<p class="mb-4 font-semibold">
				{ fmt.Sprintf("© %d goilerplate.", time.Now().Year()) } Stupid code not excluded.
			</p>
		</div>
	</footer>
}

================
File: pkg/components/form.templ
================
package components

import "fmt"

// Basis Interface für Form Daten
type FormDataProvider interface {
	// Muss JSON-serialisierbar sein
	ToJSON() string
}

// FormProps definiert die Basis-Konfiguration der Form
type FormProps[T FormDataProvider] struct {
	// Core configuration
	ID    string
	Name  string
	Class string

	// Form handling
	Action string
	Method string

	// Initial form data
	InitialData T

	// Debug mode
	Debug bool

	// Additional attributes
	Attributes templ.Attributes
}

// Form Component
templ Form[T FormDataProvider](props FormProps[T]) {
	<form
		id={ props.ID }
		name={ props.Name }
		class={ "space-y-6", props.Class }
		x-data={ fmt.Sprintf(`{
            formData: %s,
            errors: {},
            isSubmitting: false,
            submitted: false
        }`, props.InitialData.ToJSON()) }
		@submit.prevent="submit"
		{ props.Attributes... }
	>
		<div
			x-show="errors._form"
			class="p-4 rounded-md bg-destructive/10 text-destructive"
			x-text="errors._form"
		></div>
		{ children... }
		if props.Debug {
			@FormDebug()
		}
	</form>
}

// Form Debug Component
templ FormDebug() {
	<div
		class="z-50 fixed bottom-4 right-4 p-4 bg-muted rounded-lg shadow-lg max-w-sm overflow-auto max-h-[50vh]"
		x-data="{ expanded: false }"
	>
		<div class="flex justify-between items-center mb-2">
			<h3 class="font-semibold">Form Debug</h3>
			<button @click="expanded = !expanded" class="text-sm">
				<span x-text="expanded ? 'Collapse' : 'Expand'"></span>
			</button>
		</div>
		<div x-show="expanded" class="space-y-4">
			<div>
				<h4 class="text-sm font-medium mb-1">Form Data:</h4>
				<pre class="text-xs" x-text="JSON.stringify(formData, null, 2)"></pre>
			</div>
			<div x-show="Object.keys(errors).length > 0">
				<h4 class="text-sm font-medium mb-1">Errors:</h4>
				<pre class="text-xs text-destructive" x-text="JSON.stringify(errors, null, 2)"></pre>
			</div>
			<div>
				<h4 class="text-sm font-medium mb-1">State:</h4>
				<div class="text-xs space-y-1">
					<div>Submitting: <span x-text="isSubmitting"></span></div>
					<div>Submitted: <span x-text="submitted"></span></div>
				</div>
			</div>
		</div>
	</div>
}

================
File: pkg/components/input.templ
================
package components

import "github.com/axzilla/goilerplate/pkg/utils"

// InputType represents the type of the input field.
type InputType string

// Constants for input types.
const (
	InputTypeText     InputType = "text"
	InputTypePassword InputType = "password"
	InputTypeEmail    InputType = "email"
	InputTypeNumber   InputType = "number"
	InputTypeTel      InputType = "tel"
	InputTypeURL      InputType = "url"
	InputTypeSearch   InputType = "search"
	InputTypeDate     InputType = "date"
	InputTypeTime     InputType = "time"
	InputTypeFile     InputType = "file"
)

// InputProps defines the properties for the Input component.
type InputProps struct {
	// Type specifies the type of the input field.
	// Default: Text
	Type InputType

	// Placeholder is the placeholder text for the input field.
	// Default: "" (empty string)
	Placeholder string

	// Value is the current value of the input field.
	// Default: "" (empty string)
	Value string

	// Name is the name attribute of the input field.
	// Default: "" (empty string)
	Name string

	// ID is the unique identifier for the input field.
	// Default: "" (empty string)
	ID string

	// Label
	Label string

	// Description
	Description string

	// Error
	Error string

	// Class specifies additional CSS classes to apply to the input field.
	// Default: "" (empty string)
	Class string

	// FileAccept specifies which file types are accepted (only for file type).
	// Default: "" (empty string)
	FileAccept string

	// Attributes allows passing additional HTML attributes to the input element.
	// Default: nil
	Attributes templ.Attributes
}

// Input renders an input component based on the provided props.
// It can be customized with various types, sizes, and behaviors.
//
// Usage:
//
//	@components.Input(components.InputProps{
//	  Type: components.Email,
//	  Placeholder: "Enter your email",
//	  ID: "email-input",
//	  Class: "custom-input",
//	  Attributes: templ.Attributes{
//	    "aria-label": "Email input",
//	    "data-testid": "email-input",
//	  },
//	})
//
// Props:
//   - Type: The type of the input field (e.g., Text, Email, Password). Default: Text
//   - Placeholder: The placeholder text for the input field. Default: "" (empty string)
//   - Value: The current value of the input field. Default: "" (empty string)
//   - Name: The name attribute of the input field. Default: "" (empty string)
//   - ID: The unique identifier for the input field. Default: "" (empty string)
//   - Class: Additional CSS classes to apply to the input field. Default: "" (empty string)
//   - Disabled: Can be either a bool or a string. If bool (Go), it directly controls the disabled state. If string, it's treated as a JavaScript expression for dynamic disabling. Default: nil
//   - FileAccept: Specifies which file types are accepted (only for file type). Default: "" (empty string)
//   - Attributes: Additional HTML attributes to apply to the input element. Default: nil
templ Input(props InputProps) {
	<span class="space-y-2">
		if props.Label != "" {
			<label
				for={ props.ID }
				class={ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",   
      templ.KV("text-destructive", len(props.Error)>0) }
			>
				{ props.Label }
			</label>
		}
		<input
			type={ string(props.Type) }
			placeholder={ props.Placeholder }
			name={ props.Name }
			value={ props.Value }
			id={ props.ID }
			class={
				utils.TwMerge("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
					"file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground",
					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
					"disabled:cursor-not-allowed disabled:opacity-50",
					"file:text-foreground dark:file:text-foreground",
					props.Class),
			}
			if props.Type == InputTypeFile {
				accept={ props.FileAccept }
			}
			{ props.Attributes... }
		/>
		if props.Description != "" {
			<p class="text-sm text-muted-foreground m-0">{ props.Description }</p>
		}
		if props.Error != "" {
			<p class="text-sm font-medium text-destructive">{ props.Error }</p>
		}
	</span>
}

================
File: pkg/components/modal.templ
================
package components

import "github.com/axzilla/goilerplate/pkg/utils"

// ModalProps defines the properties for the Modal component.
type ModalProps struct {
	// ID is a unique identifier for the modal.
	// It's used to control opening and closing.
	// This should be unique across your application.
	ID string

	// Class specifies additional CSS classes to apply to the modal container.
	Class string
}

// Modal renders a modal dialog component.
// It uses Alpine.js for state management and animations.
//
// Usage:
//
// @components.ModalTrigger("default-modal") {
// 	@components.Button(components.ButtonProps{Text: "Open Modal"})
// }
//
// @components.Modal(components.ModalProps{ID: "default-modal", Class: "max-w-md"}) {
// 	@components.ModalHeader() {
// 		Are you absolutely sure?
// 	}
// 	@components.ModalBody() {
// 		This action cannot be undone. This will permanently delete your account and remove your data from our servers.
// 	}
// 	@components.ModalFooter() {
// 		<div class="flex gap-2">
// 			@components.ModalClose("default-modal") {
// 				@components.Button(components.ButtonProps{
// 					Text: "Cancel",
// 				})
// 			}
// 			@components.ModalClose("default-modal") {
// 				@components.Button(components.ButtonProps{
// 					Text:    "Continue",
// 					Variant: components.Secondary,
// 				})
// 			}
// 		</div>
// 	}
// }
//
// The Modal component should be used in conjunction with ModalTrigger to open it.
templ Modal(props ModalProps) {
	<div
		x-data="{ open: false }"
		x-on:open-modal.window="if ($event.detail.id === $el.dataset.modalId) open = true"
		x-on:close-modal.window="if ($event.detail.id === $el.dataset.modalId) open = false"
		data-modal-id={ props.ID }
		x-show="open"
		x-transition:enter="transition ease-out duration-300"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100"
		x-transition:leave="transition ease-in duration-200"
		x-transition:leave-start="opacity-100"
		x-transition:leave-end="opacity-0"
		class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
		aria-labelledby="modal-title"
		role="dialog"
		aria-modal="true"
	>
		<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" aria-hidden="true"></div>
		<div
			class={
				utils.TwMerge(
					"relative bg-background rounded-lg border text-left overflow-hidden shadow-xl transform transition-all sm:my-8 w-full",
					props.Class),
			}
			@click.away="open = false"
		>
			{ children... }
		</div>
	</div>
}

// ModalTrigger renders an element that opens the modal when clicked.
//
// Usage:
//
//	@components.ModalTrigger("example-modal") {
//	  @components.Button(components.ButtonProps{Text: "Open Modal"})
//	}
//
// The 'id' parameter should match the ID of the Modal you want to open.
templ ModalTrigger(id string) {
	<span
		data-modal-id={ id }
		@click="$dispatch('open-modal', { id: $el.dataset.modalId })"
	>
		{ children... }
	</span>
}

// ModalClose renders an element that closes the modal when clicked.
//
// Usage:
//
//	@components.ModalClose("example-modal") {
//	  @components.Button(components.ButtonProps{
//	    Text: "Close",
//	    Variant: components.Secondary,
//	  })
//	}
//
// The 'id' parameter should match the ID of the Modal you want to close.
templ ModalClose(id string) {
	<span
		data-modal-id={ id }
		@click="$dispatch('close-modal', { id: $el.dataset.modalId })"
	>
		{ children... }
	</span>
}

// ModalHeader renders the header section of the modal.
//
// Usage:
//
//	@components.ModalHeader() {
//	  Modal Title
//	  @components.ModalClose("example-modal")
//	}
templ ModalHeader() {
	<div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
		<h3 class="text-lg leading-6 font-medium text-foreground" id="modal-title">
			{ children... }
		</h3>
	</div>
}

// ModalBody renders the main content area of the modal.
//
// Usage:
//
//	@components.ModalBody() {
//	  <p>This is the modal content.</p>
//	}
templ ModalBody() {
	<div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
		{ children... }
	</div>
}

// ModalFooter renders the footer section of the modal, typically containing action buttons.
//
// Usage:
//
//	@components.ModalFooter() {
//	  @components.ModalClose("example-modal") {
//	    @components.Button(components.ButtonProps{
//	      Text: "Close",
//	      Variant: components.Secondary,
//	    })
//	  }
//	}
templ ModalFooter() {
	<div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
		{ children... }
	</div>
}

================
File: pkg/components/navbar.templ
================
package components

import (
	"github.com/axzilla/goilerplate/internals/shared"
	"github.com/axzilla/goilerplate/pkg/icons"
)

templ Navbar() {
	<nav class="border-b py-3">
		<div class="container mx-auto px-4 flex justify-between items-center">
			<div class="flex items-center">
				@NavbarMobileMenu()
				<a href="/" class="font-extrabold flex items-center">
					<img src="/assets/img/gopher.svg" alt="logo" class="w-10 mr-2"/>
					<span>goilerplate</span>
				</a>
			</div>
			<div class="hidden md:flex gap-4 items-center">
				<a href="/docs/getting-started" class="text-sm hover:underline">Docs</a>
				<a href="/docs/components" class="text-sm hover:underline">Components</a>
			</div>
			<div class="flex items-center space-x-2">
				@Button(ButtonProps{Size: ButtonIcon, IconLeft: icons.Github(icons.IconProps{}), Variant: "ghost", Href: "https://github.com/axzilla/goilerplate", Target: "_blank"})
				@Button(ButtonProps{Size: ButtonIcon, IconLeft: icons.Twitter(icons.IconProps{}), Variant: "ghost", Href: "https://x.com/_axzilla", Target: "_blank"})
				@ThemeSwitcher()
			</div>
		</div>
	</nav>
}

templ NavbarMobileMenu() {
	@SheetRoot() {
		@Sheet(SheetProps{Side: Left}) {
			for _, section := range shared.Sections {
				<div class="pb-4">
					<h3 class="px-4 text-sm font-bold text-gray-600">{ section.Title }</h3>
					<ul class="mt-2 space-y-1">
						for _, link := range section.Links {
							<li>
								<a
									href={ templ.SafeURL(link.Href) }
									class={ "text-sm flex items-center px-4 py-2 rounded-md text-gray-700 dark:text-gray-200", 
                    "hover:bg-gray-100 dark:hover:bg-gray-700" }
								>
									<span>{ link.Text }</span>
								</a>
							</li>
						}
					</ul>
				</div>
			}
		}
		@SheetTrigger(string(Left), Left) {
			<button
				@click="sidebarOpen = !sidebarOpen"
				class="mr-2 lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
			>
				@icons.SquareLibrary(icons.IconProps{})
				// @Icon(IconProps{Name: "square-library"})
			</button>
		}
	}
}

================
File: pkg/components/radio_group.templ
================
package components

import "github.com/axzilla/goilerplate/pkg/utils"

// RadioGroupProps defines the properties for the RadioGroup component.
type RadioGroupProps struct {
	// Name is the name attribute for the radio group
	Name string
	// Class specifies additional CSS classes
	Class string
	// Attributes allows passing additional HTML attributes
	Attributes templ.Attributes
}

// RadioGroupItemProps defines the properties for a single radio button item.
type RadioGroupItemProps struct {
	// Value is the value attribute for the radio button
	Value string
	// Name is the name attribute, should match the RadioGroup's name
	Name string
	// ID is the unique identifier for the radio button
	ID string
	// Label is the text label displayed next to the radio button
	Label templ.Component
	// Class specifies additional CSS classes
	Class string
	// Attributes allows passing additional HTML attributes
	Attributes templ.Attributes
}

// RadioGroup renders a group of radio buttons with shared name attribute.
//
// Usage:
//
//  @components.RadioGroup(components.RadioGroupProps{
//      Name: "marketing",
//  }) {
//      @components.RadioGroupItem(components.RadioGroupItemProps{
//          Value: "email",
//          Name: "marketing",
//          ID: "marketing-email",
//          Label: templ.Raw("Email Marketing"),
//      })
//  }
templ RadioGroup(props RadioGroupProps) {
	<div
		role="radiogroup"
		class={ utils.TwMerge("space-y-2", props.Class) }
		{ props.Attributes... }
	>
		{ children... }
	</div>
}

// RadioGroupItem renders a single radio button with an integrated label.
//
// Usage:
//
//  @components.RadioGroupItem(components.RadioGroupItemProps{
//      Value: "email",
//      Name: "marketing",
//      ID: "marketing-email",
//      Label: templ.Raw("Email Marketing"),
//      Attributes: templ.Attributes{"checked": selectedOption == "email"},
//  })
templ RadioGroupItem(props RadioGroupItemProps) {
	<label
		for={ props.ID }
		class={ utils.TwMerge(
            "flex items-center gap-2",
            "[&:has(:disabled)]:cursor-not-allowed [&:has(:disabled)]:opacity-50",
            props.Class,
        ) }
	>
		<input
			type="radio"
			id={ props.ID }
			name={ props.Name }
			value={ props.Value }
			class="before:content[''] relative h-4 w-4 appearance-none rounded-full 
                   border border-2 border-primary 
                   checked:border-primary checked:bg-primary
                   before:absolute before:left-1/2 before:top-1/2 
                   before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 
                   before:rounded-full before:bg-background
                   checked:before:visible
                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring 
                   focus-visible:ring-offset-2 focus-visible:ring-offset-background
                   disabled:cursor-not-allowed"
			{ props.Attributes... }
		/>
		if props.Label != nil {
			@props.Label
		} else {
			<span>{ props.Value }</span>
		}
	</label>
}

================
File: pkg/components/select.templ
================
// pkg/components/select.templ

package components

import (
	"github.com/axzilla/goilerplate/pkg/icons"
)

// SelectProps defines the properties for the Select component.
type SelectProps struct {
	// ID is the unique identifier for the select input
	ID string

	// Name is the name attribute for the select input
	Name string

	// Placeholder text when no option is selected
	Placeholder string

	// Options is the array of available options
	Options []SelectOption

	// Class specifies additional CSS classes
	Class string

	// Attributes allows passing additional HTML attributes
	Attributes templ.Attributes
}

// SelectOption represents an option in the select menu
type SelectOption struct {
	// Label is the text shown to the user
	Label string

	// Value is the actual value of the option
	Value string

	// Attributes allows passing additional HTML attributes
	Attributes templ.Attributes
}

// Select renders a custom select component with a button trigger and dropdown menu.
// It supports keyboard navigation, disabled states, and custom styling.
//
// Usage:
//
//	@components.Select(components.SelectProps{
//	    ID: "fruit",
//	    Name: "fruit",
//	    Placeholder: "Select a fruit",
//	    Value: "'apple'",
//	    Options: []components.SelectOption{
//	        {Label: "Apple", Value: "apple"},
//	        {Label: "Banana", Value: "banana", Disabled: true},
//	    },
//	})
//
// Props:
//   - ID: The unique identifier for the select input. Required.
//   - Name: The name attribute for the select input. Required.
//   - Placeholder: Text shown when no option is selected. Optional.
//   - Options: Array of SelectOption defining the available choices. Required.
//   - Value: The selected value. Can be a string or JS expression. Optional.
//   - Disabled: Controls the disabled state. Can be a string or JS expression. Optional.
//   - Class: Additional CSS classes. Optional.
//   - Attributes: Additional HTML attributes. Optional.
templ Select(props SelectProps) {
	<div class="relative">
		<select
			id={ props.ID }
			name={ props.Name }
			class="peer h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm 
                   ring-offset-background placeholder:text-muted-foreground
                   focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
                   disabled:cursor-not-allowed disabled:opacity-50"
			{ props.Attributes... }
		>
			if props.Placeholder != "" {
				<option value="" disabled selected hidden>{ props.Placeholder }</option>
			}
			for _, option := range props.Options {
				<option
					value={ option.Value }
					{ option.Attributes... }
				>
					{ option.Label }
				</option>
			}
		</select>
		<div class="absolute right-3 top-3 pointer-events-none peer-disabled:opacity-50">
			@icons.ChevronDown(icons.IconProps{Size: "16", Class: "text-muted-foreground"})
		</div>
	</div>
}

================
File: pkg/components/sheet.templ
================
package components

// SheetSide represents the side from which the sheet will appear.
type SheetSide string

// Constants for sheet sides.
const (
	Top    SheetSide = "top"
	Right  SheetSide = "right"
	Bottom SheetSide = "bottom"
	Left   SheetSide = "left"
)

// SheetProps defines the properties for the Sheet component.
type SheetProps struct {
	// Title is the heading text for the sheet.
	// Default: "" (empty string)
	Title string

	// Description is the subheading or description text for the sheet.
	// Default: "" (empty string)
	Description string

	// Side determines from which side the sheet will appear.
	// Default: Right
	Side SheetSide
}

// SheetRoot renders the root component for the Sheet, setting up the Alpine.js data and event handlers.
//
// Usage:
//
//	@components.SheetRoot() {
//	  // Sheet trigger and content go here
//	}
templ SheetRoot() {
	<div
		x-data="{ 
            isOpen: false,
            side: '',
            open(newSide) { 
                this.side = newSide; 
                this.isOpen = true; 
            },
            close() { 
                this.isOpen = false; 
            }
        }"
		@keydown.escape.window="close()"
	>
		{ children... }
	</div>
}

// Sheet renders the main sheet component with backdrop and content.
//
// Usage:
//
//	@components.Sheet(components.SheetProps{
//	  Title: "Sheet Title",
//	  Description: "Sheet description goes here",
//	  Side: components.Right,
//	}) {
//	  // Sheet content goes here
//	}
//
// Props:
//   - Title: The heading text for the sheet. Default: "" (empty string)
//   - Description: The subheading or description text for the sheet. Default: "" (empty string)
//   - Side: Determines from which side the sheet will appear. Default: Right
templ Sheet(props SheetProps) {
	<!-- Backdrop -->
	<div
		x-show="isOpen"
		class="fixed inset-0 bg-background/80 backdrop-blur-sm"
		@click="close()"
		x-transition:enter="transition ease-out duration-300"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100"
		x-transition:leave="transition ease-in duration-300"
		x-transition:leave-start="opacity-100"
		x-transition:leave-end="opacity-0"
	></div>
	<!-- Sheet -->
	<div
		x-show="isOpen"
		class="z-50"
		:class="{
            'fixed inset-y-0 right-0 w-3/4 md:w-1/2 lg:w-1/3': side === 'right',
            'fixed inset-y-0 left-0 w-3/4 md:w-1/2 lg:w-1/3': side === 'left',
            'fixed inset-x-0 top-0 h-auto sm:h-1/2': side === 'top',
            'fixed inset-x-0 bottom-0 h-auto sm:h-1/2': side === 'bottom'
        }"
		x-transition:enter="transition ease-out duration-300"
		x-transition:leave="transition ease-in duration-300"
		if props.Side == Left {
			x-transition:enter-start="opacity-0 transform -translate-x-full"
			x-transition:enter-end="opacity-100 transform translate-x-0"
			x-transition:leave-start="opacity-100 transform translate-x-0"
			x-transition:leave-end="opacity-0 transform -translate-x-full"
		}
		if props.Side == Right {
			x-transition:enter-start="opacity-0 transform translate-x-full"
			x-transition:enter-end="opacity-100 transform translate-x-0"
			x-transition:leave-start="opacity-100 transform translate-x-0"
			x-transition:leave-end="opacity-0 transform translate-x-full"
		}
		if props.Side == Top {
			x-transition:enter-start="opacity-0 transform -translate-y-full"
			x-transition:enter-end="opacity-100 transform translate-y-0"
			x-transition:leave-start="opacity-100 transform translate-y-0"
			x-transition:leave-end="opacity-0 transform -translate-y-full"
		}
		if props.Side == Bottom {
			x-transition:enter-start="opacity-0 transform translate-y-full"
			x-transition:enter-end="opacity-100 transform translate-y-0"
			x-transition:leave-start="opacity-100 transform translate-y-0"
			x-transition:leave-end="opacity-0 transform translate-y-full"
		}
	>
		<div
			class={ "h-full overflow-y-auto bg-background p-6 shadow-lg",
        templ.KV("border-l", props.Side == Right),
        templ.KV("border-r", props.Side == Left),
        templ.KV("border-t", props.Side == Bottom),
        templ.KV("border-b", props.Side == Top) }
		>
			<div class="flex flex-col space-y-2">
				<h2 class="text-lg font-semibold">{ props.Title }</h2>
				<p class="text-sm text-muted-foreground">{ props.Description }</p>
			</div>
			<div class="mt-4">
				{ children... }
			</div>
		</div>
	</div>
}

// SheetTrigger renders a trigger element that opens the sheet when clicked.
//
// Usage:
//
//	@components.SheetTrigger("Open Sheet", components.Right) {
//	  <button>Open Sheet</button>
//	}
//
// Props:
//   - text: The text content of the trigger (unused in the current implementation)
//   - side: The side from which the sheet should appear
templ SheetTrigger(text string, side SheetSide) {
	<span
		@click={ "open('" + string(side) + "')" }
	>
		{ children... }
	</span>
}

// SheetClose renders a button that closes the sheet when clicked.
//
// Usage:
//
//	@components.SheetClose("Close")
//
// Props:
//   - text: The text content of the close button
templ SheetClose(text string) {
	<button
		@click="close()"
		class={ "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background",
      "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      "disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent",
      "hover:text-accent-foreground h-10 px-4 py-2" }
	>
		{ text }
	</button>
}

================
File: pkg/components/sidebar_right.templ
================
package components

import "github.com/axzilla/goilerplate/pkg/icons"

type SidebarRightLItem struct {
	ImageSrc string
	Url      string
	Text     string
}

var SidebarRightLinks = []SidebarRightLItem{
	{
		ImageSrc: "https://templ.guide/img/logo.svg",
		Url:      "https://templ.guide",
		Text:     "Elevate your Go projects with type-safe, efficient HTML templating.",
	},
	{
		ImageSrc: "https://alpinejs.dev/alpine_long.svg",
		Url:      "https://alpinejs.dev",
		Text:     "Simplify your JavaScript with a lightweight, powerful framework.",
	},
	{
		ImageSrc: "https://tailwindcss.com/_next/static/media/tailwindcss-logotype-white.944c5d0ef628083bb316f9b3d643385c86bcdb3d.svg",
		Url:      "https://tailwindcss.com",
		Text:     "Create beautiful, responsive designs with ease.",
	},
}

templ SidebarRight() {
	<aside class="border-l border-border flex flex-col w-64 h-full p-6">
		<h3 class="text-sm font-bold text-muted-foreground">Our Friends</h3>
		for i, link := range SidebarRightLinks {
			<a href={ templ.SafeURL(link.Url) } target="_blank" class="relative opacity-80 hover:opacity-100 py-6 flex flex-col items-start justify-between overflow-hidden group">
				<span class="flex items-center justify-between w-full mb-3">
					<img src={ link.ImageSrc } alt={ link.Text } class="relative h-5 md:h-6"/>
				</span>
				<span class="relative text-xs text-muted-foreground group-hover:text-foreground md:text-sm">{ link.Text }</span>
				<span class="flex justify-start w-full">
					<span class="relative inline-block mt-2 overflow-hidden text-xs font-medium text-muted-foreground group-hover:text-foreground">
						<span class="absolute bottom-0 block w-full transition duration-150 ease-out transform -translate-x-full border-b border-foreground opacity-0 group-hover:translate-x-0 group-hover:opacity-100"></span>
						<span class="">View Website</span>
					</span>
				</span>
			</a>
			if i < len(SidebarRightLinks)-1 {
				<hr class="border-t border-border"/>
			}
		}
		<div class="border border-border rounded-lg p-4 bg-muted/50 hover:bg-muted transition-colors duration-300">
			<h4 class="text-sm font-medium text-foreground mb-2">Your Logo Here</h4>
			<p class="text-xs text-muted-foreground mb-3">
				Join our showcase and connect with fellow developers.
			</p>
			<a href="https://twitter.com/_axzilla" target="_blank" class="inline-flex items-center text-xs font-medium text-primary hover:text-primary/80 transition-colors duration-300">
				Add Your Logo
				@icons.ChevronRight(icons.IconProps{Size: "16"})
			</a>
		</div>
	</aside>
}

================
File: pkg/components/sidebar.templ
================
package components

import "github.com/axzilla/goilerplate/internals/shared"

templ Sidebar() {
	<aside class="h-full">
		<div class="h-full overflow-y-auto">
			<nav class="px-4 py-6">
				<ul class="space-y-2">
					for _, section := range shared.Sections {
						<li class="pb-4">
							<h3 class="px-4 text-sm font-bold text-gray-600">{ section.Title }</h3>
							<ul class="mt-2 space-y-1">
								for _, link := range section.Links {
									<li>
										<a href={ templ.SafeURL(link.Href) } class="text-sm flex items-center px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
											<span>{ link.Text }</span>
										</a>
									</li>
								}
							</ul>
						</li>
					}
				</ul>
			</nav>
		</div>
	</aside>
}

================
File: pkg/components/tabs.templ
================
package components

// Tab represents a single tab in the Tabs component.
type Tab struct {
	// ID is the unique identifier for the tab.
	ID string

	// Title is the text displayed on the tab button.
	Title string

	// Content is the templ.Component to be rendered when the tab is active.
	Content templ.Component
}

// TabsProps defines the properties for the Tabs component.
type TabsProps struct {
	// Tabs is an array of Tab structs representing each tab in the component.
	Tabs []Tab

	// TabsContainerClass specifies additional CSS classes for the tabs container.
	// Default: "" (empty string)
	TabsContainerClass string

	// ContentContainerClass specifies additional CSS classes for the content container.
	// Default: "" (empty string)
	ContentContainerClass string
}

// Tabs renders a tabbed interface component based on the provided props.
// It uses Alpine.js for interactivity and state management.
//
// Usage:
//
//	@components.Tabs(components.TabsProps{
//	  Tabs: []components.Tab{
//	    {ID: "1", Title: "Tab 1", Content: Tab1Content()},
//	    {ID: "2", Title: "Tab 2", Content: Tab2Content()},
//	  },
//	  TabsContainerClass: "w-full max-w-md",
//	  ContentContainerClass: "mt-4",
//	})
//
// Props:
//   - Tabs: An array of Tab structs, each representing a tab in the interface.
//   - TabsContainerClass: Additional CSS classes for the tabs container. Default: "" (empty string)
//   - ContentContainerClass: Additional CSS classes for the content container. Default: "" (empty string)
templ Tabs(props TabsProps) {
	<div
		x-data="{     
      tabSelected: '1',
      tabId: $id('tabs'),
      tabButtonClicked(tabButton) {
        this.tabSelected = tabButton.id.replace(this.tabId + '-', '');
        this.tabRepositionMarker(tabButton);
      },
      tabRepositionMarker(tabButton) {
        this.$refs.tabMarker.style.width = tabButton.offsetWidth + 'px';
        this.$refs.tabMarker.style.height = tabButton.offsetHeight + 'px';
        this.$refs.tabMarker.style.left = tabButton.offsetLeft + 'px';
      },
      tabContentActive(tabContent) {
        return this.tabSelected === tabContent.id.replace(this.tabId + '-content-', '');
      }
    }"
		x-init="$nextTick(() => tabRepositionMarker($refs.tabButtons.firstElementChild));"
		class="relative"
	>
		<!-- Tabs buttons container -->
		<div
			x-ref="tabButtons"
			class={ "relative flex items-center justify-center h-10 p-1 rounded-lg select-none",
				"bg-muted text-muted-foreground",
				props.TabsContainerClass }
		>
			<!-- Individual tab buttons -->
			for _, tab := range props.Tabs {
				<button
					:id="$id(tabId)"
					@click="tabButtonClicked($el);"
					type="button"
					class="relative z-20 flex-1 inline-flex items-center justify-center h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap"
					:class="{'text-foreground bg-background shadow-sm': tabSelected === '{tab.ID}', 'hover:text-foreground': tabSelected !== '{tab.ID}'}"
				>
					{ tab.Title }
				</button>
			}
			<!-- Active tab marker -->
			<div x-ref="tabMarker" class="absolute left-0 z-10 h-full duration-300 ease-out" x-cloak>
				<div class="w-full h-full bg-background rounded-md shadow-sm"></div>
			</div>
		</div>
		<!-- Tab content container -->
		<div class={ "relative mt-2 content", props.ContentContainerClass }>
			<!-- Individual tab content -->
			for _, tab := range props.Tabs {
				<div
					:id="$id(tabId + '-content')"
					x-show="tabContentActive($el)"
					class="relative"
					x-cloak
				>
					@tab.Content
				</div>
			}
		</div>
	</div>
}

================
File: pkg/components/themeswitcher.templ
================
package components

import "github.com/axzilla/goilerplate/pkg/icons"

templ ThemeSwitcher() {
	@Button(ButtonProps{
		Size:     ButtonIcon,
		Variant:  Ghost,
		IconLeft: templ.Component(DynamicThemeIcon()),
		Attributes: templ.Attributes{
			"@click": "toggleTheme()",
		},
	})
}

templ DynamicThemeIcon() {
	<span x-show="appTheme === 'dark'" class="block">
		@LightIcon()
	</span>
	<span x-show="appTheme === 'light'" class="block">
		@DarkIcon()
	</span>
}

templ DarkIcon() {
	@icons.Moon(icons.IconProps{})
}

templ LightIcon() {
	@icons.SunMedium(icons.IconProps{})
}

================
File: pkg/components/toggle.templ
================
package components

// ToggleSize represents the size of the toggle
type ToggleSize string

// ToggleLabelPlacement represents where the label should be placed
type ToggleLabelPlacement string

// ToggleProps defines the properties for the Toggle component
type ToggleProps struct {
	// ID is the unique identifier for the toggle input
	ID string

	// Name is the name attribute for the toggle input
	Name string

	// Label is the text label for the toggle
	LabelLeft string

	// Label is the text label for the toggle
	LabelRight string

	// Class specifies additional CSS classes
	Class string

	// Attributes allows passing additional HTML attributes
	Attributes templ.Attributes
}

// Toggle renders a toggle switch component based on the provided props.
// It can be customized with different label placements, and supports
// both static and dynamic states through Alpine.js integration.
//
// Props:
//   - ID: The unique identifier for the toggle input. Required.
//   - Name: The name attribute for the toggle input. Required.
//   - LabelLeft: The text label for the toggle. Optional.
//   - LabelRight: The text label for the toggle. Optional.
//   - Class: Additional CSS classes. Optional.
//   - Attributes: Additional HTML attributes. Optional.
templ Toggle(props ToggleProps) {
	<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
		<input
			id={ props.ID }
			type="checkbox"
			name={ props.Name }
			class="peer sr-only"
			role="switch"
			{ props.Attributes... }
		/>
		if props.LabelLeft != "" {
			<span class="text-sm select-none text-muted-foreground peer-checked:text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
				{ props.LabelLeft }
			</span>
		}
		<div
			class="relative h-6 w-10 rounded-full bg-neutral-200 after:h-5 after:w-5 peer-checked:after:translate-x-[16px] after:absolute after:left-0.5 after:top-0.5 after:rounded-full after:bg-muted-foreground after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:bg-secondary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"
			aria-hidden="true"
		></div>
		if props.LabelRight != "" {
			<span class="text-sm select-none text-muted-foreground peer-checked:text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
				{ props.LabelRight }
			</span>
		}
	</label>
}

================
File: pkg/icons/embed.go
================
package icons

import "embed"

//go:embed icons.go
var TemplFiles embed.FS

================
File: pkg/icons/icon_defs.go
================
package icons
// This file is auto generated
var AArrowDown = Icon("a-arrow-down")
var AArrowUp = Icon("a-arrow-up")
var ALargeSmall = Icon("a-large-small")
var Accessibility = Icon("accessibility")
var Activity = Icon("activity")
var AirVent = Icon("air-vent")
var Airplay = Icon("airplay")
var AlarmClockCheck = Icon("alarm-clock-check")
var AlarmClockMinus = Icon("alarm-clock-minus")
var AlarmClockOff = Icon("alarm-clock-off")
var AlarmClockPlus = Icon("alarm-clock-plus")
var AlarmClock = Icon("alarm-clock")
var AlarmSmoke = Icon("alarm-smoke")
var Album = Icon("album")
var AlignCenterHorizontal = Icon("align-center-horizontal")
var AlignCenterVertical = Icon("align-center-vertical")
var AlignCenter = Icon("align-center")
var AlignEndHorizontal = Icon("align-end-horizontal")
var AlignEndVertical = Icon("align-end-vertical")
var AlignHorizontalDistributeCenter = Icon("align-horizontal-distribute-center")
var AlignHorizontalDistributeEnd = Icon("align-horizontal-distribute-end")
var AlignHorizontalDistributeStart = Icon("align-horizontal-distribute-start")
var AlignHorizontalJustifyCenter = Icon("align-horizontal-justify-center")
var AlignHorizontalJustifyEnd = Icon("align-horizontal-justify-end")
var AlignHorizontalJustifyStart = Icon("align-horizontal-justify-start")
var AlignHorizontalSpaceAround = Icon("align-horizontal-space-around")
var AlignHorizontalSpaceBetween = Icon("align-horizontal-space-between")
var AlignJustify = Icon("align-justify")
var AlignLeft = Icon("align-left")
var AlignRight = Icon("align-right")
var AlignStartHorizontal = Icon("align-start-horizontal")
var AlignStartVertical = Icon("align-start-vertical")
var AlignVerticalDistributeCenter = Icon("align-vertical-distribute-center")
var AlignVerticalDistributeEnd = Icon("align-vertical-distribute-end")
var AlignVerticalDistributeStart = Icon("align-vertical-distribute-start")
var AlignVerticalJustifyCenter = Icon("align-vertical-justify-center")
var AlignVerticalJustifyEnd = Icon("align-vertical-justify-end")
var AlignVerticalJustifyStart = Icon("align-vertical-justify-start")
var AlignVerticalSpaceAround = Icon("align-vertical-space-around")
var AlignVerticalSpaceBetween = Icon("align-vertical-space-between")
var Ambulance = Icon("ambulance")
var Ampersand = Icon("ampersand")
var Ampersands = Icon("ampersands")
var Amphora = Icon("amphora")
var Anchor = Icon("anchor")
var Angry = Icon("angry")
var Annoyed = Icon("annoyed")
var Antenna = Icon("antenna")
var Anvil = Icon("anvil")
var Aperture = Icon("aperture")
var AppWindowMac = Icon("app-window-mac")
var AppWindow = Icon("app-window")
var Apple = Icon("apple")
var ArchiveRestore = Icon("archive-restore")
var ArchiveX = Icon("archive-x")
var Archive = Icon("archive")
var Armchair = Icon("armchair")
var ArrowBigDownDash = Icon("arrow-big-down-dash")
var ArrowBigDown = Icon("arrow-big-down")
var ArrowBigLeftDash = Icon("arrow-big-left-dash")
var ArrowBigLeft = Icon("arrow-big-left")
var ArrowBigRightDash = Icon("arrow-big-right-dash")
var ArrowBigRight = Icon("arrow-big-right")
var ArrowBigUpDash = Icon("arrow-big-up-dash")
var ArrowBigUp = Icon("arrow-big-up")
var ArrowDown01 = Icon("arrow-down-0-1")
var ArrowDown10 = Icon("arrow-down-1-0")
var ArrowDownAZ = Icon("arrow-down-a-z")
var ArrowDownFromLine = Icon("arrow-down-from-line")
var ArrowDownLeft = Icon("arrow-down-left")
var ArrowDownNarrowWide = Icon("arrow-down-narrow-wide")
var ArrowDownRight = Icon("arrow-down-right")
var ArrowDownToDot = Icon("arrow-down-to-dot")
var ArrowDownToLine = Icon("arrow-down-to-line")
var ArrowDownUp = Icon("arrow-down-up")
var ArrowDownWideNarrow = Icon("arrow-down-wide-narrow")
var ArrowDownZA = Icon("arrow-down-z-a")
var ArrowDown = Icon("arrow-down")
var ArrowLeftFromLine = Icon("arrow-left-from-line")
var ArrowLeftRight = Icon("arrow-left-right")
var ArrowLeftToLine = Icon("arrow-left-to-line")
var ArrowLeft = Icon("arrow-left")
var ArrowRightFromLine = Icon("arrow-right-from-line")
var ArrowRightLeft = Icon("arrow-right-left")
var ArrowRightToLine = Icon("arrow-right-to-line")
var ArrowRight = Icon("arrow-right")
var ArrowUp01 = Icon("arrow-up-0-1")
var ArrowUp10 = Icon("arrow-up-1-0")
var ArrowUpAZ = Icon("arrow-up-a-z")
var ArrowUpDown = Icon("arrow-up-down")
var ArrowUpFromDot = Icon("arrow-up-from-dot")
var ArrowUpFromLine = Icon("arrow-up-from-line")
var ArrowUpLeft = Icon("arrow-up-left")
var ArrowUpNarrowWide = Icon("arrow-up-narrow-wide")
var ArrowUpRight = Icon("arrow-up-right")
var ArrowUpToLine = Icon("arrow-up-to-line")
var ArrowUpWideNarrow = Icon("arrow-up-wide-narrow")
var ArrowUpZA = Icon("arrow-up-z-a")
var ArrowUp = Icon("arrow-up")
var ArrowsUpFromLine = Icon("arrows-up-from-line")
var Asterisk = Icon("asterisk")
var AtSign = Icon("at-sign")
var Atom = Icon("atom")
var AudioLines = Icon("audio-lines")
var AudioWaveform = Icon("audio-waveform")
var Award = Icon("award")
var Axe = Icon("axe")
var Axis3d = Icon("axis-3d")
var Baby = Icon("baby")
var Backpack = Icon("backpack")
var BadgeAlert = Icon("badge-alert")
var BadgeCent = Icon("badge-cent")
var BadgeCheck = Icon("badge-check")
var BadgeDollarSign = Icon("badge-dollar-sign")
var BadgeEuro = Icon("badge-euro")
var BadgeHelp = Icon("badge-help")
var BadgeIndianRupee = Icon("badge-indian-rupee")
var BadgeInfo = Icon("badge-info")
var BadgeJapaneseYen = Icon("badge-japanese-yen")
var BadgeMinus = Icon("badge-minus")
var BadgePercent = Icon("badge-percent")
var BadgePlus = Icon("badge-plus")
var BadgePoundSterling = Icon("badge-pound-sterling")
var BadgeRussianRuble = Icon("badge-russian-ruble")
var BadgeSwissFranc = Icon("badge-swiss-franc")
var BadgeX = Icon("badge-x")
var Badge = Icon("badge")
var BaggageClaim = Icon("baggage-claim")
var Ban = Icon("ban")
var Banana = Icon("banana")
var Bandage = Icon("bandage")
var Banknote = Icon("banknote")
var Barcode = Icon("barcode")
var Baseline = Icon("baseline")
var Bath = Icon("bath")
var BatteryCharging = Icon("battery-charging")
var BatteryFull = Icon("battery-full")
var BatteryLow = Icon("battery-low")
var BatteryMedium = Icon("battery-medium")
var BatteryWarning = Icon("battery-warning")
var Battery = Icon("battery")
var Beaker = Icon("beaker")
var BeanOff = Icon("bean-off")
var Bean = Icon("bean")
var BedDouble = Icon("bed-double")
var BedSingle = Icon("bed-single")
var Bed = Icon("bed")
var Beef = Icon("beef")
var BeerOff = Icon("beer-off")
var Beer = Icon("beer")
var BellDot = Icon("bell-dot")
var BellElectric = Icon("bell-electric")
var BellMinus = Icon("bell-minus")
var BellOff = Icon("bell-off")
var BellPlus = Icon("bell-plus")
var BellRing = Icon("bell-ring")
var Bell = Icon("bell")
var BetweenHorizontalEnd = Icon("between-horizontal-end")
var BetweenHorizontalStart = Icon("between-horizontal-start")
var BetweenVerticalEnd = Icon("between-vertical-end")
var BetweenVerticalStart = Icon("between-vertical-start")
var BicepsFlexed = Icon("biceps-flexed")
var Bike = Icon("bike")
var Binary = Icon("binary")
var Binoculars = Icon("binoculars")
var Biohazard = Icon("biohazard")
var Bird = Icon("bird")
var Bitcoin = Icon("bitcoin")
var Blend = Icon("blend")
var Blinds = Icon("blinds")
var Blocks = Icon("blocks")
var BluetoothConnected = Icon("bluetooth-connected")
var BluetoothOff = Icon("bluetooth-off")
var BluetoothSearching = Icon("bluetooth-searching")
var Bluetooth = Icon("bluetooth")
var Bold = Icon("bold")
var Bolt = Icon("bolt")
var Bomb = Icon("bomb")
var Bone = Icon("bone")
var BookA = Icon("book-a")
var BookAudio = Icon("book-audio")
var BookCheck = Icon("book-check")
var BookCopy = Icon("book-copy")
var BookDashed = Icon("book-dashed")
var BookDown = Icon("book-down")
var BookHeadphones = Icon("book-headphones")
var BookHeart = Icon("book-heart")
var BookImage = Icon("book-image")
var BookKey = Icon("book-key")
var BookLock = Icon("book-lock")
var BookMarked = Icon("book-marked")
var BookMinus = Icon("book-minus")
var BookOpenCheck = Icon("book-open-check")
var BookOpenText = Icon("book-open-text")
var BookOpen = Icon("book-open")
var BookPlus = Icon("book-plus")
var BookText = Icon("book-text")
var BookType = Icon("book-type")
var BookUp2 = Icon("book-up-2")
var BookUp = Icon("book-up")
var BookUser = Icon("book-user")
var BookX = Icon("book-x")
var Book = Icon("book")
var BookmarkCheck = Icon("bookmark-check")
var BookmarkMinus = Icon("bookmark-minus")
var BookmarkPlus = Icon("bookmark-plus")
var BookmarkX = Icon("bookmark-x")
var Bookmark = Icon("bookmark")
var BoomBox = Icon("boom-box")
var BotMessageSquare = Icon("bot-message-square")
var BotOff = Icon("bot-off")
var Bot = Icon("bot")
var Box = Icon("box")
var Boxes = Icon("boxes")
var Braces = Icon("braces")
var Brackets = Icon("brackets")
var BrainCircuit = Icon("brain-circuit")
var BrainCog = Icon("brain-cog")
var Brain = Icon("brain")
var BrickWall = Icon("brick-wall")
var BriefcaseBusiness = Icon("briefcase-business")
var BriefcaseConveyorBelt = Icon("briefcase-conveyor-belt")
var BriefcaseMedical = Icon("briefcase-medical")
var Briefcase = Icon("briefcase")
var BringToFront = Icon("bring-to-front")
var Brush = Icon("brush")
var BugOff = Icon("bug-off")
var BugPlay = Icon("bug-play")
var Bug = Icon("bug")
var Building2 = Icon("building-2")
var Building = Icon("building")
var BusFront = Icon("bus-front")
var Bus = Icon("bus")
var CableCar = Icon("cable-car")
var Cable = Icon("cable")
var CakeSlice = Icon("cake-slice")
var Cake = Icon("cake")
var Calculator = Icon("calculator")
var CalendarArrowDown = Icon("calendar-arrow-down")
var CalendarArrowUp = Icon("calendar-arrow-up")
var CalendarCheck2 = Icon("calendar-check-2")
var CalendarCheck = Icon("calendar-check")
var CalendarClock = Icon("calendar-clock")
var CalendarCog = Icon("calendar-cog")
var CalendarDays = Icon("calendar-days")
var CalendarFold = Icon("calendar-fold")
var CalendarHeart = Icon("calendar-heart")
var CalendarMinus2 = Icon("calendar-minus-2")
var CalendarMinus = Icon("calendar-minus")
var CalendarOff = Icon("calendar-off")
var CalendarPlus2 = Icon("calendar-plus-2")
var CalendarPlus = Icon("calendar-plus")
var CalendarRange = Icon("calendar-range")
var CalendarSearch = Icon("calendar-search")
var CalendarX2 = Icon("calendar-x-2")
var CalendarX = Icon("calendar-x")
var Calendar = Icon("calendar")
var CameraOff = Icon("camera-off")
var Camera = Icon("camera")
var CandyCane = Icon("candy-cane")
var CandyOff = Icon("candy-off")
var Candy = Icon("candy")
var Cannabis = Icon("cannabis")
var CaptionsOff = Icon("captions-off")
var Captions = Icon("captions")
var CarFront = Icon("car-front")
var CarTaxiFront = Icon("car-taxi-front")
var Car = Icon("car")
var Caravan = Icon("caravan")
var Carrot = Icon("carrot")
var CaseLower = Icon("case-lower")
var CaseSensitive = Icon("case-sensitive")
var CaseUpper = Icon("case-upper")
var CassetteTape = Icon("cassette-tape")
var Cast = Icon("cast")
var Castle = Icon("castle")
var Cat = Icon("cat")
var Cctv = Icon("cctv")
var ChartArea = Icon("chart-area")
var ChartBarBig = Icon("chart-bar-big")
var ChartBarDecreasing = Icon("chart-bar-decreasing")
var ChartBarIncreasing = Icon("chart-bar-increasing")
var ChartBarStacked = Icon("chart-bar-stacked")
var ChartBar = Icon("chart-bar")
var ChartCandlestick = Icon("chart-candlestick")
var ChartColumnBig = Icon("chart-column-big")
var ChartColumnDecreasing = Icon("chart-column-decreasing")
var ChartColumnIncreasing = Icon("chart-column-increasing")
var ChartColumnStacked = Icon("chart-column-stacked")
var ChartColumn = Icon("chart-column")
var ChartGantt = Icon("chart-gantt")
var ChartLine = Icon("chart-line")
var ChartNetwork = Icon("chart-network")
var ChartNoAxesColumnDecreasing = Icon("chart-no-axes-column-decreasing")
var ChartNoAxesColumnIncreasing = Icon("chart-no-axes-column-increasing")
var ChartNoAxesColumn = Icon("chart-no-axes-column")
var ChartNoAxesCombined = Icon("chart-no-axes-combined")
var ChartNoAxesGantt = Icon("chart-no-axes-gantt")
var ChartPie = Icon("chart-pie")
var ChartScatter = Icon("chart-scatter")
var ChartSpline = Icon("chart-spline")
var CheckCheck = Icon("check-check")
var Check = Icon("check")
var ChefHat = Icon("chef-hat")
var Cherry = Icon("cherry")
var ChevronDown = Icon("chevron-down")
var ChevronFirst = Icon("chevron-first")
var ChevronLast = Icon("chevron-last")
var ChevronLeft = Icon("chevron-left")
var ChevronRight = Icon("chevron-right")
var ChevronUp = Icon("chevron-up")
var ChevronsDownUp = Icon("chevrons-down-up")
var ChevronsDown = Icon("chevrons-down")
var ChevronsLeftRightEllipsis = Icon("chevrons-left-right-ellipsis")
var ChevronsLeftRight = Icon("chevrons-left-right")
var ChevronsLeft = Icon("chevrons-left")
var ChevronsRightLeft = Icon("chevrons-right-left")
var ChevronsRight = Icon("chevrons-right")
var ChevronsUpDown = Icon("chevrons-up-down")
var ChevronsUp = Icon("chevrons-up")
var Chrome = Icon("chrome")
var Church = Icon("church")
var CigaretteOff = Icon("cigarette-off")
var Cigarette = Icon("cigarette")
var CircleAlert = Icon("circle-alert")
var CircleArrowDown = Icon("circle-arrow-down")
var CircleArrowLeft = Icon("circle-arrow-left")
var CircleArrowOutDownLeft = Icon("circle-arrow-out-down-left")
var CircleArrowOutDownRight = Icon("circle-arrow-out-down-right")
var CircleArrowOutUpLeft = Icon("circle-arrow-out-up-left")
var CircleArrowOutUpRight = Icon("circle-arrow-out-up-right")
var CircleArrowRight = Icon("circle-arrow-right")
var CircleArrowUp = Icon("circle-arrow-up")
var CircleCheckBig = Icon("circle-check-big")
var CircleCheck = Icon("circle-check")
var CircleChevronDown = Icon("circle-chevron-down")
var CircleChevronLeft = Icon("circle-chevron-left")
var CircleChevronRight = Icon("circle-chevron-right")
var CircleChevronUp = Icon("circle-chevron-up")
var CircleDashed = Icon("circle-dashed")
var CircleDivide = Icon("circle-divide")
var CircleDollarSign = Icon("circle-dollar-sign")
var CircleDotDashed = Icon("circle-dot-dashed")
var CircleDot = Icon("circle-dot")
var CircleEllipsis = Icon("circle-ellipsis")
var CircleEqual = Icon("circle-equal")
var CircleFadingArrowUp = Icon("circle-fading-arrow-up")
var CircleFadingPlus = Icon("circle-fading-plus")
var CircleGauge = Icon("circle-gauge")
var CircleHelp = Icon("circle-help")
var CircleMinus = Icon("circle-minus")
var CircleOff = Icon("circle-off")
var CircleParkingOff = Icon("circle-parking-off")
var CircleParking = Icon("circle-parking")
var CirclePause = Icon("circle-pause")
var CirclePercent = Icon("circle-percent")
var CirclePlay = Icon("circle-play")
var CirclePlus = Icon("circle-plus")
var CirclePower = Icon("circle-power")
var CircleSlash2 = Icon("circle-slash-2")
var CircleSlash = Icon("circle-slash")
var CircleStop = Icon("circle-stop")
var CircleUserRound = Icon("circle-user-round")
var CircleUser = Icon("circle-user")
var CircleX = Icon("circle-x")
var Circle = Icon("circle")
var CircuitBoard = Icon("circuit-board")
var Citrus = Icon("citrus")
var Clapperboard = Icon("clapperboard")
var ClipboardCheck = Icon("clipboard-check")
var ClipboardCopy = Icon("clipboard-copy")
var ClipboardList = Icon("clipboard-list")
var ClipboardMinus = Icon("clipboard-minus")
var ClipboardPaste = Icon("clipboard-paste")
var ClipboardPenLine = Icon("clipboard-pen-line")
var ClipboardPen = Icon("clipboard-pen")
var ClipboardPlus = Icon("clipboard-plus")
var ClipboardType = Icon("clipboard-type")
var ClipboardX = Icon("clipboard-x")
var Clipboard = Icon("clipboard")
var Clock1 = Icon("clock-1")
var Clock10 = Icon("clock-10")
var Clock11 = Icon("clock-11")
var Clock12 = Icon("clock-12")
var Clock2 = Icon("clock-2")
var Clock3 = Icon("clock-3")
var Clock4 = Icon("clock-4")
var Clock5 = Icon("clock-5")
var Clock6 = Icon("clock-6")
var Clock7 = Icon("clock-7")
var Clock8 = Icon("clock-8")
var Clock9 = Icon("clock-9")
var ClockAlert = Icon("clock-alert")
var ClockArrowDown = Icon("clock-arrow-down")
var ClockArrowUp = Icon("clock-arrow-up")
var Clock = Icon("clock")
var CloudCog = Icon("cloud-cog")
var CloudDownload = Icon("cloud-download")
var CloudDrizzle = Icon("cloud-drizzle")
var CloudFog = Icon("cloud-fog")
var CloudHail = Icon("cloud-hail")
var CloudLightning = Icon("cloud-lightning")
var CloudMoonRain = Icon("cloud-moon-rain")
var CloudMoon = Icon("cloud-moon")
var CloudOff = Icon("cloud-off")
var CloudRainWind = Icon("cloud-rain-wind")
var CloudRain = Icon("cloud-rain")
var CloudSnow = Icon("cloud-snow")
var CloudSunRain = Icon("cloud-sun-rain")
var CloudSun = Icon("cloud-sun")
var CloudUpload = Icon("cloud-upload")
var Cloud = Icon("cloud")
var Cloudy = Icon("cloudy")
var Clover = Icon("clover")
var Club = Icon("club")
var CodeXml = Icon("code-xml")
var Code = Icon("code")
var Codepen = Icon("codepen")
var Codesandbox = Icon("codesandbox")
var Coffee = Icon("coffee")
var Cog = Icon("cog")
var Coins = Icon("coins")
var Columns2 = Icon("columns-2")
var Columns3 = Icon("columns-3")
var Columns4 = Icon("columns-4")
var Combine = Icon("combine")
var Command = Icon("command")
var Compass = Icon("compass")
var Component = Icon("component")
var Computer = Icon("computer")
var ConciergeBell = Icon("concierge-bell")
var Cone = Icon("cone")
var Construction = Icon("construction")
var ContactRound = Icon("contact-round")
var Contact = Icon("contact")
var Container = Icon("container")
var Contrast = Icon("contrast")
var Cookie = Icon("cookie")
var CookingPot = Icon("cooking-pot")
var CopyCheck = Icon("copy-check")
var CopyMinus = Icon("copy-minus")
var CopyPlus = Icon("copy-plus")
var CopySlash = Icon("copy-slash")
var CopyX = Icon("copy-x")
var Copy = Icon("copy")
var Copyleft = Icon("copyleft")
var Copyright = Icon("copyright")
var CornerDownLeft = Icon("corner-down-left")
var CornerDownRight = Icon("corner-down-right")
var CornerLeftDown = Icon("corner-left-down")
var CornerLeftUp = Icon("corner-left-up")
var CornerRightDown = Icon("corner-right-down")
var CornerRightUp = Icon("corner-right-up")
var CornerUpLeft = Icon("corner-up-left")
var CornerUpRight = Icon("corner-up-right")
var Cpu = Icon("cpu")
var CreativeCommons = Icon("creative-commons")
var CreditCard = Icon("credit-card")
var Croissant = Icon("croissant")
var Crop = Icon("crop")
var Cross = Icon("cross")
var Crosshair = Icon("crosshair")
var Crown = Icon("crown")
var Cuboid = Icon("cuboid")
var CupSoda = Icon("cup-soda")
var Currency = Icon("currency")
var Cylinder = Icon("cylinder")
var Dam = Icon("dam")
var DatabaseBackup = Icon("database-backup")
var DatabaseZap = Icon("database-zap")
var Database = Icon("database")
var Delete = Icon("delete")
var Dessert = Icon("dessert")
var Diameter = Icon("diameter")
var DiamondMinus = Icon("diamond-minus")
var DiamondPercent = Icon("diamond-percent")
var DiamondPlus = Icon("diamond-plus")
var Diamond = Icon("diamond")
var Dice1 = Icon("dice-1")
var Dice2 = Icon("dice-2")
var Dice3 = Icon("dice-3")
var Dice4 = Icon("dice-4")
var Dice5 = Icon("dice-5")
var Dice6 = Icon("dice-6")
var Dices = Icon("dices")
var Diff = Icon("diff")
var Disc2 = Icon("disc-2")
var Disc3 = Icon("disc-3")
var DiscAlbum = Icon("disc-album")
var Disc = Icon("disc")
var Divide = Icon("divide")
var DnaOff = Icon("dna-off")
var Dna = Icon("dna")
var Dock = Icon("dock")
var Dog = Icon("dog")
var DollarSign = Icon("dollar-sign")
var Donut = Icon("donut")
var DoorClosed = Icon("door-closed")
var DoorOpen = Icon("door-open")
var Dot = Icon("dot")
var Download = Icon("download")
var DraftingCompass = Icon("drafting-compass")
var Drama = Icon("drama")
var Dribbble = Icon("dribbble")
var Drill = Icon("drill")
var Droplet = Icon("droplet")
var Droplets = Icon("droplets")
var Drum = Icon("drum")
var Drumstick = Icon("drumstick")
var Dumbbell = Icon("dumbbell")
var EarOff = Icon("ear-off")
var Ear = Icon("ear")
var EarthLock = Icon("earth-lock")
var Earth = Icon("earth")
var Eclipse = Icon("eclipse")
var EggFried = Icon("egg-fried")
var EggOff = Icon("egg-off")
var Egg = Icon("egg")
var EllipsisVertical = Icon("ellipsis-vertical")
var Ellipsis = Icon("ellipsis")
var EqualNot = Icon("equal-not")
var Equal = Icon("equal")
var Eraser = Icon("eraser")
var EthernetPort = Icon("ethernet-port")
var Euro = Icon("euro")
var Expand = Icon("expand")
var ExternalLink = Icon("external-link")
var EyeClosed = Icon("eye-closed")
var EyeOff = Icon("eye-off")
var Eye = Icon("eye")
var Facebook = Icon("facebook")
var Factory = Icon("factory")
var Fan = Icon("fan")
var FastForward = Icon("fast-forward")
var Feather = Icon("feather")
var Fence = Icon("fence")
var FerrisWheel = Icon("ferris-wheel")
var Figma = Icon("figma")
var FileArchive = Icon("file-archive")
var FileAudio2 = Icon("file-audio-2")
var FileAudio = Icon("file-audio")
var FileAxis3d = Icon("file-axis-3d")
var FileBadge2 = Icon("file-badge-2")
var FileBadge = Icon("file-badge")
var FileBox = Icon("file-box")
var FileChartColumnIncreasing = Icon("file-chart-column-increasing")
var FileChartColumn = Icon("file-chart-column")
var FileChartLine = Icon("file-chart-line")
var FileChartPie = Icon("file-chart-pie")
var FileCheck2 = Icon("file-check-2")
var FileCheck = Icon("file-check")
var FileClock = Icon("file-clock")
var FileCode2 = Icon("file-code-2")
var FileCode = Icon("file-code")
var FileCog = Icon("file-cog")
var FileDiff = Icon("file-diff")
var FileDigit = Icon("file-digit")
var FileDown = Icon("file-down")
var FileHeart = Icon("file-heart")
var FileImage = Icon("file-image")
var FileInput = Icon("file-input")
var FileJson2 = Icon("file-json-2")
var FileJson = Icon("file-json")
var FileKey2 = Icon("file-key-2")
var FileKey = Icon("file-key")
var FileLock2 = Icon("file-lock-2")
var FileLock = Icon("file-lock")
var FileMinus2 = Icon("file-minus-2")
var FileMinus = Icon("file-minus")
var FileMusic = Icon("file-music")
var FileOutput = Icon("file-output")
var FilePenLine = Icon("file-pen-line")
var FilePen = Icon("file-pen")
var FilePlus2 = Icon("file-plus-2")
var FilePlus = Icon("file-plus")
var FileQuestion = Icon("file-question")
var FileScan = Icon("file-scan")
var FileSearch2 = Icon("file-search-2")
var FileSearch = Icon("file-search")
var FileSliders = Icon("file-sliders")
var FileSpreadsheet = Icon("file-spreadsheet")
var FileStack = Icon("file-stack")
var FileSymlink = Icon("file-symlink")
var FileTerminal = Icon("file-terminal")
var FileText = Icon("file-text")
var FileType2 = Icon("file-type-2")
var FileType = Icon("file-type")
var FileUp = Icon("file-up")
var FileUser = Icon("file-user")
var FileVideo2 = Icon("file-video-2")
var FileVideo = Icon("file-video")
var FileVolume2 = Icon("file-volume-2")
var FileVolume = Icon("file-volume")
var FileWarning = Icon("file-warning")
var FileX2 = Icon("file-x-2")
var FileX = Icon("file-x")
var File = Icon("file")
var Files = Icon("files")
var Film = Icon("film")
var FilterX = Icon("filter-x")
var Filter = Icon("filter")
var Fingerprint = Icon("fingerprint")
var FireExtinguisher = Icon("fire-extinguisher")
var FishOff = Icon("fish-off")
var FishSymbol = Icon("fish-symbol")
var Fish = Icon("fish")
var FlagOff = Icon("flag-off")
var FlagTriangleLeft = Icon("flag-triangle-left")
var FlagTriangleRight = Icon("flag-triangle-right")
var Flag = Icon("flag")
var FlameKindling = Icon("flame-kindling")
var Flame = Icon("flame")
var FlashlightOff = Icon("flashlight-off")
var Flashlight = Icon("flashlight")
var FlaskConicalOff = Icon("flask-conical-off")
var FlaskConical = Icon("flask-conical")
var FlaskRound = Icon("flask-round")
var FlipHorizontal2 = Icon("flip-horizontal-2")
var FlipHorizontal = Icon("flip-horizontal")
var FlipVertical2 = Icon("flip-vertical-2")
var FlipVertical = Icon("flip-vertical")
var Flower2 = Icon("flower-2")
var Flower = Icon("flower")
var Focus = Icon("focus")
var FoldHorizontal = Icon("fold-horizontal")
var FoldVertical = Icon("fold-vertical")
var FolderArchive = Icon("folder-archive")
var FolderCheck = Icon("folder-check")
var FolderClock = Icon("folder-clock")
var FolderClosed = Icon("folder-closed")
var FolderCode = Icon("folder-code")
var FolderCog = Icon("folder-cog")
var FolderDot = Icon("folder-dot")
var FolderDown = Icon("folder-down")
var FolderGit2 = Icon("folder-git-2")
var FolderGit = Icon("folder-git")
var FolderHeart = Icon("folder-heart")
var FolderInput = Icon("folder-input")
var FolderKanban = Icon("folder-kanban")
var FolderKey = Icon("folder-key")
var FolderLock = Icon("folder-lock")
var FolderMinus = Icon("folder-minus")
var FolderOpenDot = Icon("folder-open-dot")
var FolderOpen = Icon("folder-open")
var FolderOutput = Icon("folder-output")
var FolderPen = Icon("folder-pen")
var FolderPlus = Icon("folder-plus")
var FolderRoot = Icon("folder-root")
var FolderSearch2 = Icon("folder-search-2")
var FolderSearch = Icon("folder-search")
var FolderSymlink = Icon("folder-symlink")
var FolderSync = Icon("folder-sync")
var FolderTree = Icon("folder-tree")
var FolderUp = Icon("folder-up")
var FolderX = Icon("folder-x")
var Folder = Icon("folder")
var Folders = Icon("folders")
var Footprints = Icon("footprints")
var Forklift = Icon("forklift")
var Forward = Icon("forward")
var Frame = Icon("frame")
var Framer = Icon("framer")
var Frown = Icon("frown")
var Fuel = Icon("fuel")
var Fullscreen = Icon("fullscreen")
var GalleryHorizontalEnd = Icon("gallery-horizontal-end")
var GalleryHorizontal = Icon("gallery-horizontal")
var GalleryThumbnails = Icon("gallery-thumbnails")
var GalleryVerticalEnd = Icon("gallery-vertical-end")
var GalleryVertical = Icon("gallery-vertical")
var Gamepad2 = Icon("gamepad-2")
var Gamepad = Icon("gamepad")
var Gauge = Icon("gauge")
var Gavel = Icon("gavel")
var Gem = Icon("gem")
var Ghost = Icon("ghost")
var Gift = Icon("gift")
var GitBranchPlus = Icon("git-branch-plus")
var GitBranch = Icon("git-branch")
var GitCommitHorizontal = Icon("git-commit-horizontal")
var GitCommitVertical = Icon("git-commit-vertical")
var GitCompareArrows = Icon("git-compare-arrows")
var GitCompare = Icon("git-compare")
var GitFork = Icon("git-fork")
var GitGraph = Icon("git-graph")
var GitMerge = Icon("git-merge")
var GitPullRequestArrow = Icon("git-pull-request-arrow")
var GitPullRequestClosed = Icon("git-pull-request-closed")
var GitPullRequestCreateArrow = Icon("git-pull-request-create-arrow")
var GitPullRequestCreate = Icon("git-pull-request-create")
var GitPullRequestDraft = Icon("git-pull-request-draft")
var GitPullRequest = Icon("git-pull-request")
var Github = Icon("github")
var Gitlab = Icon("gitlab")
var GlassWater = Icon("glass-water")
var Glasses = Icon("glasses")
var GlobeLock = Icon("globe-lock")
var Globe = Icon("globe")
var Goal = Icon("goal")
var Grab = Icon("grab")
var GraduationCap = Icon("graduation-cap")
var Grape = Icon("grape")
var Grid2x2Check = Icon("grid-2x2-check")
var Grid2x2Plus = Icon("grid-2x2-plus")
var Grid2x2X = Icon("grid-2x2-x")
var Grid2x2 = Icon("grid-2x2")
var Grid3x3 = Icon("grid-3x3")
var GripHorizontal = Icon("grip-horizontal")
var GripVertical = Icon("grip-vertical")
var Grip = Icon("grip")
var Group = Icon("group")
var Guitar = Icon("guitar")
var Ham = Icon("ham")
var Hammer = Icon("hammer")
var HandCoins = Icon("hand-coins")
var HandHeart = Icon("hand-heart")
var HandHelping = Icon("hand-helping")
var HandMetal = Icon("hand-metal")
var HandPlatter = Icon("hand-platter")
var Hand = Icon("hand")
var Handshake = Icon("handshake")
var HardDriveDownload = Icon("hard-drive-download")
var HardDriveUpload = Icon("hard-drive-upload")
var HardDrive = Icon("hard-drive")
var HardHat = Icon("hard-hat")
var Hash = Icon("hash")
var Haze = Icon("haze")
var HdmiPort = Icon("hdmi-port")
var Heading1 = Icon("heading-1")
var Heading2 = Icon("heading-2")
var Heading3 = Icon("heading-3")
var Heading4 = Icon("heading-4")
var Heading5 = Icon("heading-5")
var Heading6 = Icon("heading-6")
var Heading = Icon("heading")
var HeadphoneOff = Icon("headphone-off")
var Headphones = Icon("headphones")
var Headset = Icon("headset")
var HeartCrack = Icon("heart-crack")
var HeartHandshake = Icon("heart-handshake")
var HeartOff = Icon("heart-off")
var HeartPulse = Icon("heart-pulse")
var Heart = Icon("heart")
var Heater = Icon("heater")
var Hexagon = Icon("hexagon")
var Highlighter = Icon("highlighter")
var History = Icon("history")
var HopOff = Icon("hop-off")
var Hop = Icon("hop")
var Hospital = Icon("hospital")
var Hotel = Icon("hotel")
var Hourglass = Icon("hourglass")
var HousePlug = Icon("house-plug")
var HousePlus = Icon("house-plus")
var House = Icon("house")
var IceCreamBowl = Icon("ice-cream-bowl")
var IceCreamCone = Icon("ice-cream-cone")
var IdCard = Icon("id-card")
var ImageDown = Icon("image-down")
var ImageMinus = Icon("image-minus")
var ImageOff = Icon("image-off")
var ImagePlay = Icon("image-play")
var ImagePlus = Icon("image-plus")
var ImageUp = Icon("image-up")
var Image = Icon("image")
var Images = Icon("images")
var Import = Icon("import")
var Inbox = Icon("inbox")
var IndentDecrease = Icon("indent-decrease")
var IndentIncrease = Icon("indent-increase")
var IndianRupee = Icon("indian-rupee")
var Infinity = Icon("infinity")
var Info = Icon("info")
var InspectionPanel = Icon("inspection-panel")
var Instagram = Icon("instagram")
var Italic = Icon("italic")
var IterationCcw = Icon("iteration-ccw")
var IterationCw = Icon("iteration-cw")
var JapaneseYen = Icon("japanese-yen")
var Joystick = Icon("joystick")
var Kanban = Icon("kanban")
var KeyRound = Icon("key-round")
var KeySquare = Icon("key-square")
var Key = Icon("key")
var KeyboardMusic = Icon("keyboard-music")
var KeyboardOff = Icon("keyboard-off")
var Keyboard = Icon("keyboard")
var LampCeiling = Icon("lamp-ceiling")
var LampDesk = Icon("lamp-desk")
var LampFloor = Icon("lamp-floor")
var LampWallDown = Icon("lamp-wall-down")
var LampWallUp = Icon("lamp-wall-up")
var Lamp = Icon("lamp")
var LandPlot = Icon("land-plot")
var Landmark = Icon("landmark")
var Languages = Icon("languages")
var LaptopMinimal = Icon("laptop-minimal")
var Laptop = Icon("laptop")
var LassoSelect = Icon("lasso-select")
var Lasso = Icon("lasso")
var Laugh = Icon("laugh")
var Layers2 = Icon("layers-2")
var Layers3 = Icon("layers-3")
var Layers = Icon("layers")
var LayoutDashboard = Icon("layout-dashboard")
var LayoutGrid = Icon("layout-grid")
var LayoutList = Icon("layout-list")
var LayoutPanelLeft = Icon("layout-panel-left")
var LayoutPanelTop = Icon("layout-panel-top")
var LayoutTemplate = Icon("layout-template")
var Leaf = Icon("leaf")
var LeafyGreen = Icon("leafy-green")
var Lectern = Icon("lectern")
var LetterText = Icon("letter-text")
var LibraryBig = Icon("library-big")
var Library = Icon("library")
var LifeBuoy = Icon("life-buoy")
var Ligature = Icon("ligature")
var LightbulbOff = Icon("lightbulb-off")
var Lightbulb = Icon("lightbulb")
var Link2Off = Icon("link-2-off")
var Link2 = Icon("link-2")
var Link = Icon("link")
var Linkedin = Icon("linkedin")
var ListCheck = Icon("list-check")
var ListChecks = Icon("list-checks")
var ListCollapse = Icon("list-collapse")
var ListEnd = Icon("list-end")
var ListFilter = Icon("list-filter")
var ListMinus = Icon("list-minus")
var ListMusic = Icon("list-music")
var ListOrdered = Icon("list-ordered")
var ListPlus = Icon("list-plus")
var ListRestart = Icon("list-restart")
var ListStart = Icon("list-start")
var ListTodo = Icon("list-todo")
var ListTree = Icon("list-tree")
var ListVideo = Icon("list-video")
var ListX = Icon("list-x")
var List = Icon("list")
var LoaderCircle = Icon("loader-circle")
var LoaderPinwheel = Icon("loader-pinwheel")
var Loader = Icon("loader")
var LocateFixed = Icon("locate-fixed")
var LocateOff = Icon("locate-off")
var Locate = Icon("locate")
var LockKeyholeOpen = Icon("lock-keyhole-open")
var LockKeyhole = Icon("lock-keyhole")
var LockOpen = Icon("lock-open")
var Lock = Icon("lock")
var LogIn = Icon("log-in")
var LogOut = Icon("log-out")
var Logs = Icon("logs")
var Lollipop = Icon("lollipop")
var Luggage = Icon("luggage")
var Magnet = Icon("magnet")
var MailCheck = Icon("mail-check")
var MailMinus = Icon("mail-minus")
var MailOpen = Icon("mail-open")
var MailPlus = Icon("mail-plus")
var MailQuestion = Icon("mail-question")
var MailSearch = Icon("mail-search")
var MailWarning = Icon("mail-warning")
var MailX = Icon("mail-x")
var Mail = Icon("mail")
var Mailbox = Icon("mailbox")
var Mails = Icon("mails")
var MapPinCheckInside = Icon("map-pin-check-inside")
var MapPinCheck = Icon("map-pin-check")
var MapPinHouse = Icon("map-pin-house")
var MapPinMinusInside = Icon("map-pin-minus-inside")
var MapPinMinus = Icon("map-pin-minus")
var MapPinOff = Icon("map-pin-off")
var MapPinPlusInside = Icon("map-pin-plus-inside")
var MapPinPlus = Icon("map-pin-plus")
var MapPinXInside = Icon("map-pin-x-inside")
var MapPinX = Icon("map-pin-x")
var MapPin = Icon("map-pin")
var MapPinned = Icon("map-pinned")
var Map = Icon("map")
var Martini = Icon("martini")
var Maximize2 = Icon("maximize-2")
var Maximize = Icon("maximize")
var Medal = Icon("medal")
var MegaphoneOff = Icon("megaphone-off")
var Megaphone = Icon("megaphone")
var Meh = Icon("meh")
var MemoryStick = Icon("memory-stick")
var Menu = Icon("menu")
var Merge = Icon("merge")
var MessageCircleCode = Icon("message-circle-code")
var MessageCircleDashed = Icon("message-circle-dashed")
var MessageCircleHeart = Icon("message-circle-heart")
var MessageCircleMore = Icon("message-circle-more")
var MessageCircleOff = Icon("message-circle-off")
var MessageCirclePlus = Icon("message-circle-plus")
var MessageCircleQuestion = Icon("message-circle-question")
var MessageCircleReply = Icon("message-circle-reply")
var MessageCircleWarning = Icon("message-circle-warning")
var MessageCircleX = Icon("message-circle-x")
var MessageCircle = Icon("message-circle")
var MessageSquareCode = Icon("message-square-code")
var MessageSquareDashed = Icon("message-square-dashed")
var MessageSquareDiff = Icon("message-square-diff")
var MessageSquareDot = Icon("message-square-dot")
var MessageSquareHeart = Icon("message-square-heart")
var MessageSquareLock = Icon("message-square-lock")
var MessageSquareMore = Icon("message-square-more")
var MessageSquareOff = Icon("message-square-off")
var MessageSquarePlus = Icon("message-square-plus")
var MessageSquareQuote = Icon("message-square-quote")
var MessageSquareReply = Icon("message-square-reply")
var MessageSquareShare = Icon("message-square-share")
var MessageSquareText = Icon("message-square-text")
var MessageSquareWarning = Icon("message-square-warning")
var MessageSquareX = Icon("message-square-x")
var MessageSquare = Icon("message-square")
var MessagesSquare = Icon("messages-square")
var MicOff = Icon("mic-off")
var MicVocal = Icon("mic-vocal")
var Mic = Icon("mic")
var Microchip = Icon("microchip")
var Microscope = Icon("microscope")
var Microwave = Icon("microwave")
var Milestone = Icon("milestone")
var MilkOff = Icon("milk-off")
var Milk = Icon("milk")
var Minimize2 = Icon("minimize-2")
var Minimize = Icon("minimize")
var Minus = Icon("minus")
var MonitorCheck = Icon("monitor-check")
var MonitorCog = Icon("monitor-cog")
var MonitorDot = Icon("monitor-dot")
var MonitorDown = Icon("monitor-down")
var MonitorOff = Icon("monitor-off")
var MonitorPause = Icon("monitor-pause")
var MonitorPlay = Icon("monitor-play")
var MonitorSmartphone = Icon("monitor-smartphone")
var MonitorSpeaker = Icon("monitor-speaker")
var MonitorStop = Icon("monitor-stop")
var MonitorUp = Icon("monitor-up")
var MonitorX = Icon("monitor-x")
var Monitor = Icon("monitor")
var MoonStar = Icon("moon-star")
var Moon = Icon("moon")
var MountainSnow = Icon("mountain-snow")
var Mountain = Icon("mountain")
var MouseOff = Icon("mouse-off")
var MousePointer2 = Icon("mouse-pointer-2")
var MousePointerBan = Icon("mouse-pointer-ban")
var MousePointerClick = Icon("mouse-pointer-click")
var MousePointer = Icon("mouse-pointer")
var Mouse = Icon("mouse")
var Move3d = Icon("move-3d")
var MoveDiagonal2 = Icon("move-diagonal-2")
var MoveDiagonal = Icon("move-diagonal")
var MoveDownLeft = Icon("move-down-left")
var MoveDownRight = Icon("move-down-right")
var MoveDown = Icon("move-down")
var MoveHorizontal = Icon("move-horizontal")
var MoveLeft = Icon("move-left")
var MoveRight = Icon("move-right")
var MoveUpLeft = Icon("move-up-left")
var MoveUpRight = Icon("move-up-right")
var MoveUp = Icon("move-up")
var MoveVertical = Icon("move-vertical")
var Move = Icon("move")
var Music2 = Icon("music-2")
var Music3 = Icon("music-3")
var Music4 = Icon("music-4")
var Music = Icon("music")
var Navigation2Off = Icon("navigation-2-off")
var Navigation2 = Icon("navigation-2")
var NavigationOff = Icon("navigation-off")
var Navigation = Icon("navigation")
var Network = Icon("network")
var Newspaper = Icon("newspaper")
var Nfc = Icon("nfc")
var NotebookPen = Icon("notebook-pen")
var NotebookTabs = Icon("notebook-tabs")
var NotebookText = Icon("notebook-text")
var Notebook = Icon("notebook")
var NotepadTextDashed = Icon("notepad-text-dashed")
var NotepadText = Icon("notepad-text")
var NutOff = Icon("nut-off")
var Nut = Icon("nut")
var OctagonAlert = Icon("octagon-alert")
var OctagonMinus = Icon("octagon-minus")
var OctagonPause = Icon("octagon-pause")
var OctagonX = Icon("octagon-x")
var Octagon = Icon("octagon")
var Omega = Icon("omega")
var Option = Icon("option")
var Orbit = Icon("orbit")
var Origami = Icon("origami")
var Package2 = Icon("package-2")
var PackageCheck = Icon("package-check")
var PackageMinus = Icon("package-minus")
var PackageOpen = Icon("package-open")
var PackagePlus = Icon("package-plus")
var PackageSearch = Icon("package-search")
var PackageX = Icon("package-x")
var Package = Icon("package")
var PaintBucket = Icon("paint-bucket")
var PaintRoller = Icon("paint-roller")
var PaintbrushVertical = Icon("paintbrush-vertical")
var Paintbrush = Icon("paintbrush")
var Palette = Icon("palette")
var PanelBottomClose = Icon("panel-bottom-close")
var PanelBottomDashed = Icon("panel-bottom-dashed")
var PanelBottomOpen = Icon("panel-bottom-open")
var PanelBottom = Icon("panel-bottom")
var PanelLeftClose = Icon("panel-left-close")
var PanelLeftDashed = Icon("panel-left-dashed")
var PanelLeftOpen = Icon("panel-left-open")
var PanelLeft = Icon("panel-left")
var PanelRightClose = Icon("panel-right-close")
var PanelRightDashed = Icon("panel-right-dashed")
var PanelRightOpen = Icon("panel-right-open")
var PanelRight = Icon("panel-right")
var PanelTopClose = Icon("panel-top-close")
var PanelTopDashed = Icon("panel-top-dashed")
var PanelTopOpen = Icon("panel-top-open")
var PanelTop = Icon("panel-top")
var PanelsLeftBottom = Icon("panels-left-bottom")
var PanelsRightBottom = Icon("panels-right-bottom")
var PanelsTopLeft = Icon("panels-top-left")
var Paperclip = Icon("paperclip")
var Parentheses = Icon("parentheses")
var ParkingMeter = Icon("parking-meter")
var PartyPopper = Icon("party-popper")
var Pause = Icon("pause")
var PawPrint = Icon("paw-print")
var PcCase = Icon("pc-case")
var PenLine = Icon("pen-line")
var PenOff = Icon("pen-off")
var PenTool = Icon("pen-tool")
var Pen = Icon("pen")
var PencilLine = Icon("pencil-line")
var PencilOff = Icon("pencil-off")
var PencilRuler = Icon("pencil-ruler")
var Pencil = Icon("pencil")
var Pentagon = Icon("pentagon")
var Percent = Icon("percent")
var PersonStanding = Icon("person-standing")
var PhilippinePeso = Icon("philippine-peso")
var PhoneCall = Icon("phone-call")
var PhoneForwarded = Icon("phone-forwarded")
var PhoneIncoming = Icon("phone-incoming")
var PhoneMissed = Icon("phone-missed")
var PhoneOff = Icon("phone-off")
var PhoneOutgoing = Icon("phone-outgoing")
var Phone = Icon("phone")
var Pi = Icon("pi")
var Piano = Icon("piano")
var Pickaxe = Icon("pickaxe")
var PictureInPicture2 = Icon("picture-in-picture-2")
var PictureInPicture = Icon("picture-in-picture")
var PiggyBank = Icon("piggy-bank")
var PilcrowLeft = Icon("pilcrow-left")
var PilcrowRight = Icon("pilcrow-right")
var Pilcrow = Icon("pilcrow")
var PillBottle = Icon("pill-bottle")
var Pill = Icon("pill")
var PinOff = Icon("pin-off")
var Pin = Icon("pin")
var Pipette = Icon("pipette")
var Pizza = Icon("pizza")
var PlaneLanding = Icon("plane-landing")
var PlaneTakeoff = Icon("plane-takeoff")
var Plane = Icon("plane")
var Play = Icon("play")
var Plug2 = Icon("plug-2")
var PlugZap = Icon("plug-zap")
var Plug = Icon("plug")
var Plus = Icon("plus")
var PocketKnife = Icon("pocket-knife")
var Pocket = Icon("pocket")
var Podcast = Icon("podcast")
var PointerOff = Icon("pointer-off")
var Pointer = Icon("pointer")
var Popcorn = Icon("popcorn")
var Popsicle = Icon("popsicle")
var PoundSterling = Icon("pound-sterling")
var PowerOff = Icon("power-off")
var Power = Icon("power")
var Presentation = Icon("presentation")
var PrinterCheck = Icon("printer-check")
var Printer = Icon("printer")
var Projector = Icon("projector")
var Proportions = Icon("proportions")
var Puzzle = Icon("puzzle")
var Pyramid = Icon("pyramid")
var QrCode = Icon("qr-code")
var Quote = Icon("quote")
var Rabbit = Icon("rabbit")
var Radar = Icon("radar")
var Radiation = Icon("radiation")
var Radical = Icon("radical")
var RadioReceiver = Icon("radio-receiver")
var RadioTower = Icon("radio-tower")
var Radio = Icon("radio")
var Radius = Icon("radius")
var RailSymbol = Icon("rail-symbol")
var Rainbow = Icon("rainbow")
var Rat = Icon("rat")
var Ratio = Icon("ratio")
var ReceiptCent = Icon("receipt-cent")
var ReceiptEuro = Icon("receipt-euro")
var ReceiptIndianRupee = Icon("receipt-indian-rupee")
var ReceiptJapaneseYen = Icon("receipt-japanese-yen")
var ReceiptPoundSterling = Icon("receipt-pound-sterling")
var ReceiptRussianRuble = Icon("receipt-russian-ruble")
var ReceiptSwissFranc = Icon("receipt-swiss-franc")
var ReceiptText = Icon("receipt-text")
var Receipt = Icon("receipt")
var RectangleEllipsis = Icon("rectangle-ellipsis")
var RectangleHorizontal = Icon("rectangle-horizontal")
var RectangleVertical = Icon("rectangle-vertical")
var Recycle = Icon("recycle")
var Redo2 = Icon("redo-2")
var RedoDot = Icon("redo-dot")
var Redo = Icon("redo")
var RefreshCcwDot = Icon("refresh-ccw-dot")
var RefreshCcw = Icon("refresh-ccw")
var RefreshCwOff = Icon("refresh-cw-off")
var RefreshCw = Icon("refresh-cw")
var Refrigerator = Icon("refrigerator")
var Regex = Icon("regex")
var RemoveFormatting = Icon("remove-formatting")
var Repeat1 = Icon("repeat-1")
var Repeat2 = Icon("repeat-2")
var Repeat = Icon("repeat")
var ReplaceAll = Icon("replace-all")
var Replace = Icon("replace")
var ReplyAll = Icon("reply-all")
var Reply = Icon("reply")
var Rewind = Icon("rewind")
var Ribbon = Icon("ribbon")
var Rocket = Icon("rocket")
var RockingChair = Icon("rocking-chair")
var RollerCoaster = Icon("roller-coaster")
var Rotate3d = Icon("rotate-3d")
var RotateCcwSquare = Icon("rotate-ccw-square")
var RotateCcw = Icon("rotate-ccw")
var RotateCwSquare = Icon("rotate-cw-square")
var RotateCw = Icon("rotate-cw")
var RouteOff = Icon("route-off")
var Route = Icon("route")
var Router = Icon("router")
var Rows2 = Icon("rows-2")
var Rows3 = Icon("rows-3")
var Rows4 = Icon("rows-4")
var Rss = Icon("rss")
var Ruler = Icon("ruler")
var RussianRuble = Icon("russian-ruble")
var Sailboat = Icon("sailboat")
var Salad = Icon("salad")
var Sandwich = Icon("sandwich")
var SatelliteDish = Icon("satellite-dish")
var Satellite = Icon("satellite")
var SaveAll = Icon("save-all")
var SaveOff = Icon("save-off")
var Save = Icon("save")
var Scale3d = Icon("scale-3d")
var Scale = Icon("scale")
var Scaling = Icon("scaling")
var ScanBarcode = Icon("scan-barcode")
var ScanEye = Icon("scan-eye")
var ScanFace = Icon("scan-face")
var ScanLine = Icon("scan-line")
var ScanQrCode = Icon("scan-qr-code")
var ScanSearch = Icon("scan-search")
var ScanText = Icon("scan-text")
var Scan = Icon("scan")
var School = Icon("school")
var ScissorsLineDashed = Icon("scissors-line-dashed")
var Scissors = Icon("scissors")
var ScreenShareOff = Icon("screen-share-off")
var ScreenShare = Icon("screen-share")
var ScrollText = Icon("scroll-text")
var Scroll = Icon("scroll")
var SearchCheck = Icon("search-check")
var SearchCode = Icon("search-code")
var SearchSlash = Icon("search-slash")
var SearchX = Icon("search-x")
var Search = Icon("search")
var Section = Icon("section")
var SendHorizontal = Icon("send-horizontal")
var SendToBack = Icon("send-to-back")
var Send = Icon("send")
var SeparatorHorizontal = Icon("separator-horizontal")
var SeparatorVertical = Icon("separator-vertical")
var ServerCog = Icon("server-cog")
var ServerCrash = Icon("server-crash")
var ServerOff = Icon("server-off")
var Server = Icon("server")
var Settings2 = Icon("settings-2")
var Settings = Icon("settings")
var Shapes = Icon("shapes")
var Share2 = Icon("share-2")
var Share = Icon("share")
var Sheet = Icon("sheet")
var Shell = Icon("shell")
var ShieldAlert = Icon("shield-alert")
var ShieldBan = Icon("shield-ban")
var ShieldCheck = Icon("shield-check")
var ShieldEllipsis = Icon("shield-ellipsis")
var ShieldHalf = Icon("shield-half")
var ShieldMinus = Icon("shield-minus")
var ShieldOff = Icon("shield-off")
var ShieldPlus = Icon("shield-plus")
var ShieldQuestion = Icon("shield-question")
var ShieldX = Icon("shield-x")
var Shield = Icon("shield")
var ShipWheel = Icon("ship-wheel")
var Ship = Icon("ship")
var Shirt = Icon("shirt")
var ShoppingBag = Icon("shopping-bag")
var ShoppingBasket = Icon("shopping-basket")
var ShoppingCart = Icon("shopping-cart")
var Shovel = Icon("shovel")
var ShowerHead = Icon("shower-head")
var Shrink = Icon("shrink")
var Shrub = Icon("shrub")
var Shuffle = Icon("shuffle")
var Sigma = Icon("sigma")
var SignalHigh = Icon("signal-high")
var SignalLow = Icon("signal-low")
var SignalMedium = Icon("signal-medium")
var SignalZero = Icon("signal-zero")
var Signal = Icon("signal")
var Signature = Icon("signature")
var SignpostBig = Icon("signpost-big")
var Signpost = Icon("signpost")
var Siren = Icon("siren")
var SkipBack = Icon("skip-back")
var SkipForward = Icon("skip-forward")
var Skull = Icon("skull")
var Slack = Icon("slack")
var Slash = Icon("slash")
var Slice = Icon("slice")
var SlidersHorizontal = Icon("sliders-horizontal")
var SlidersVertical = Icon("sliders-vertical")
var SmartphoneCharging = Icon("smartphone-charging")
var SmartphoneNfc = Icon("smartphone-nfc")
var Smartphone = Icon("smartphone")
var SmilePlus = Icon("smile-plus")
var Smile = Icon("smile")
var Snail = Icon("snail")
var Snowflake = Icon("snowflake")
var Sofa = Icon("sofa")
var Soup = Icon("soup")
var Space = Icon("space")
var Spade = Icon("spade")
var Sparkle = Icon("sparkle")
var Sparkles = Icon("sparkles")
var Speaker = Icon("speaker")
var Speech = Icon("speech")
var SpellCheck2 = Icon("spell-check-2")
var SpellCheck = Icon("spell-check")
var Spline = Icon("spline")
var Split = Icon("split")
var SprayCan = Icon("spray-can")
var Sprout = Icon("sprout")
var SquareActivity = Icon("square-activity")
var SquareArrowDownLeft = Icon("square-arrow-down-left")
var SquareArrowDownRight = Icon("square-arrow-down-right")
var SquareArrowDown = Icon("square-arrow-down")
var SquareArrowLeft = Icon("square-arrow-left")
var SquareArrowOutDownLeft = Icon("square-arrow-out-down-left")
var SquareArrowOutDownRight = Icon("square-arrow-out-down-right")
var SquareArrowOutUpLeft = Icon("square-arrow-out-up-left")
var SquareArrowOutUpRight = Icon("square-arrow-out-up-right")
var SquareArrowRight = Icon("square-arrow-right")
var SquareArrowUpLeft = Icon("square-arrow-up-left")
var SquareArrowUpRight = Icon("square-arrow-up-right")
var SquareArrowUp = Icon("square-arrow-up")
var SquareAsterisk = Icon("square-asterisk")
var SquareBottomDashedScissors = Icon("square-bottom-dashed-scissors")
var SquareChartGantt = Icon("square-chart-gantt")
var SquareCheckBig = Icon("square-check-big")
var SquareCheck = Icon("square-check")
var SquareChevronDown = Icon("square-chevron-down")
var SquareChevronLeft = Icon("square-chevron-left")
var SquareChevronRight = Icon("square-chevron-right")
var SquareChevronUp = Icon("square-chevron-up")
var SquareCode = Icon("square-code")
var SquareDashedBottomCode = Icon("square-dashed-bottom-code")
var SquareDashedBottom = Icon("square-dashed-bottom")
var SquareDashedKanban = Icon("square-dashed-kanban")
var SquareDashedMousePointer = Icon("square-dashed-mouse-pointer")
var SquareDashed = Icon("square-dashed")
var SquareDivide = Icon("square-divide")
var SquareDot = Icon("square-dot")
var SquareEqual = Icon("square-equal")
var SquareFunction = Icon("square-function")
var SquareKanban = Icon("square-kanban")
var SquareLibrary = Icon("square-library")
var SquareM = Icon("square-m")
var SquareMenu = Icon("square-menu")
var SquareMinus = Icon("square-minus")
var SquareMousePointer = Icon("square-mouse-pointer")
var SquareParkingOff = Icon("square-parking-off")
var SquareParking = Icon("square-parking")
var SquarePen = Icon("square-pen")
var SquarePercent = Icon("square-percent")
var SquarePi = Icon("square-pi")
var SquarePilcrow = Icon("square-pilcrow")
var SquarePlay = Icon("square-play")
var SquarePlus = Icon("square-plus")
var SquarePower = Icon("square-power")
var SquareRadical = Icon("square-radical")
var SquareScissors = Icon("square-scissors")
var SquareSigma = Icon("square-sigma")
var SquareSlash = Icon("square-slash")
var SquareSplitHorizontal = Icon("square-split-horizontal")
var SquareSplitVertical = Icon("square-split-vertical")
var SquareSquare = Icon("square-square")
var SquareStack = Icon("square-stack")
var SquareTerminal = Icon("square-terminal")
var SquareUserRound = Icon("square-user-round")
var SquareUser = Icon("square-user")
var SquareX = Icon("square-x")
var Square = Icon("square")
var Squircle = Icon("squircle")
var Squirrel = Icon("squirrel")
var Stamp = Icon("stamp")
var StarHalf = Icon("star-half")
var StarOff = Icon("star-off")
var Star = Icon("star")
var StepBack = Icon("step-back")
var StepForward = Icon("step-forward")
var Stethoscope = Icon("stethoscope")
var Sticker = Icon("sticker")
var StickyNote = Icon("sticky-note")
var Store = Icon("store")
var StretchHorizontal = Icon("stretch-horizontal")
var StretchVertical = Icon("stretch-vertical")
var Strikethrough = Icon("strikethrough")
var Subscript = Icon("subscript")
var SunDim = Icon("sun-dim")
var SunMedium = Icon("sun-medium")
var SunMoon = Icon("sun-moon")
var SunSnow = Icon("sun-snow")
var Sun = Icon("sun")
var Sunrise = Icon("sunrise")
var Sunset = Icon("sunset")
var Superscript = Icon("superscript")
var SwatchBook = Icon("swatch-book")
var SwissFranc = Icon("swiss-franc")
var SwitchCamera = Icon("switch-camera")
var Sword = Icon("sword")
var Swords = Icon("swords")
var Syringe = Icon("syringe")
var Table2 = Icon("table-2")
var TableCellsMerge = Icon("table-cells-merge")
var TableCellsSplit = Icon("table-cells-split")
var TableColumnsSplit = Icon("table-columns-split")
var TableOfContents = Icon("table-of-contents")
var TableProperties = Icon("table-properties")
var TableRowsSplit = Icon("table-rows-split")
var Table = Icon("table")
var TabletSmartphone = Icon("tablet-smartphone")
var Tablet = Icon("tablet")
var Tablets = Icon("tablets")
var Tag = Icon("tag")
var Tags = Icon("tags")
var Tally1 = Icon("tally-1")
var Tally2 = Icon("tally-2")
var Tally3 = Icon("tally-3")
var Tally4 = Icon("tally-4")
var Tally5 = Icon("tally-5")
var Tangent = Icon("tangent")
var Target = Icon("target")
var Telescope = Icon("telescope")
var TentTree = Icon("tent-tree")
var Tent = Icon("tent")
var Terminal = Icon("terminal")
var TestTubeDiagonal = Icon("test-tube-diagonal")
var TestTube = Icon("test-tube")
var TestTubes = Icon("test-tubes")
var TextCursorInput = Icon("text-cursor-input")
var TextCursor = Icon("text-cursor")
var TextQuote = Icon("text-quote")
var TextSearch = Icon("text-search")
var TextSelect = Icon("text-select")
var Text = Icon("text")
var Theater = Icon("theater")
var ThermometerSnowflake = Icon("thermometer-snowflake")
var ThermometerSun = Icon("thermometer-sun")
var Thermometer = Icon("thermometer")
var ThumbsDown = Icon("thumbs-down")
var ThumbsUp = Icon("thumbs-up")
var TicketCheck = Icon("ticket-check")
var TicketMinus = Icon("ticket-minus")
var TicketPercent = Icon("ticket-percent")
var TicketPlus = Icon("ticket-plus")
var TicketSlash = Icon("ticket-slash")
var TicketX = Icon("ticket-x")
var Ticket = Icon("ticket")
var TicketsPlane = Icon("tickets-plane")
var Tickets = Icon("tickets")
var TimerOff = Icon("timer-off")
var TimerReset = Icon("timer-reset")
var Timer = Icon("timer")
var ToggleLeft = Icon("toggle-left")
var ToggleRight = Icon("toggle-right")
var Tornado = Icon("tornado")
var Torus = Icon("torus")
var TouchpadOff = Icon("touchpad-off")
var Touchpad = Icon("touchpad")
var TowerControl = Icon("tower-control")
var ToyBrick = Icon("toy-brick")
var Tractor = Icon("tractor")
var TrafficCone = Icon("traffic-cone")
var TrainFrontTunnel = Icon("train-front-tunnel")
var TrainFront = Icon("train-front")
var TrainTrack = Icon("train-track")
var TramFront = Icon("tram-front")
var Trash2 = Icon("trash-2")
var Trash = Icon("trash")
var TreeDeciduous = Icon("tree-deciduous")
var TreePalm = Icon("tree-palm")
var TreePine = Icon("tree-pine")
var Trees = Icon("trees")
var Trello = Icon("trello")
var TrendingDown = Icon("trending-down")
var TrendingUpDown = Icon("trending-up-down")
var TrendingUp = Icon("trending-up")
var TriangleAlert = Icon("triangle-alert")
var TriangleRight = Icon("triangle-right")
var Triangle = Icon("triangle")
var Trophy = Icon("trophy")
var Truck = Icon("truck")
var Turtle = Icon("turtle")
var TvMinimalPlay = Icon("tv-minimal-play")
var TvMinimal = Icon("tv-minimal")
var Tv = Icon("tv")
var Twitch = Icon("twitch")
var Twitter = Icon("twitter")
var TypeOutline = Icon("type-outline")
var Type = Icon("type")
var UmbrellaOff = Icon("umbrella-off")
var Umbrella = Icon("umbrella")
var Underline = Icon("underline")
var Undo2 = Icon("undo-2")
var UndoDot = Icon("undo-dot")
var Undo = Icon("undo")
var UnfoldHorizontal = Icon("unfold-horizontal")
var UnfoldVertical = Icon("unfold-vertical")
var Ungroup = Icon("ungroup")
var University = Icon("university")
var Unlink2 = Icon("unlink-2")
var Unlink = Icon("unlink")
var Unplug = Icon("unplug")
var Upload = Icon("upload")
var Usb = Icon("usb")
var UserCheck = Icon("user-check")
var UserCog = Icon("user-cog")
var UserMinus = Icon("user-minus")
var UserPen = Icon("user-pen")
var UserPlus = Icon("user-plus")
var UserRoundCheck = Icon("user-round-check")
var UserRoundCog = Icon("user-round-cog")
var UserRoundMinus = Icon("user-round-minus")
var UserRoundPen = Icon("user-round-pen")
var UserRoundPlus = Icon("user-round-plus")
var UserRoundSearch = Icon("user-round-search")
var UserRoundX = Icon("user-round-x")
var UserRound = Icon("user-round")
var UserSearch = Icon("user-search")
var UserX = Icon("user-x")
var User = Icon("user")
var UsersRound = Icon("users-round")
var Users = Icon("users")
var UtensilsCrossed = Icon("utensils-crossed")
var Utensils = Icon("utensils")
var UtilityPole = Icon("utility-pole")
var Variable = Icon("variable")
var Vault = Icon("vault")
var Vegan = Icon("vegan")
var VenetianMask = Icon("venetian-mask")
var VibrateOff = Icon("vibrate-off")
var Vibrate = Icon("vibrate")
var VideoOff = Icon("video-off")
var Video = Icon("video")
var Videotape = Icon("videotape")
var View = Icon("view")
var Voicemail = Icon("voicemail")
var Volleyball = Icon("volleyball")
var Volume1 = Icon("volume-1")
var Volume2 = Icon("volume-2")
var VolumeOff = Icon("volume-off")
var VolumeX = Icon("volume-x")
var Volume = Icon("volume")
var Vote = Icon("vote")
var WalletCards = Icon("wallet-cards")
var WalletMinimal = Icon("wallet-minimal")
var Wallet = Icon("wallet")
var Wallpaper = Icon("wallpaper")
var WandSparkles = Icon("wand-sparkles")
var Wand = Icon("wand")
var Warehouse = Icon("warehouse")
var WashingMachine = Icon("washing-machine")
var Watch = Icon("watch")
var Waves = Icon("waves")
var Waypoints = Icon("waypoints")
var Webcam = Icon("webcam")
var WebhookOff = Icon("webhook-off")
var Webhook = Icon("webhook")
var Weight = Icon("weight")
var WheatOff = Icon("wheat-off")
var Wheat = Icon("wheat")
var WholeWord = Icon("whole-word")
var WifiHigh = Icon("wifi-high")
var WifiLow = Icon("wifi-low")
var WifiOff = Icon("wifi-off")
var WifiZero = Icon("wifi-zero")
var Wifi = Icon("wifi")
var Wind = Icon("wind")
var WineOff = Icon("wine-off")
var Wine = Icon("wine")
var Workflow = Icon("workflow")
var Worm = Icon("worm")
var WrapText = Icon("wrap-text")
var Wrench = Icon("wrench")
var X = Icon("x")
var Youtube = Icon("youtube")
var ZapOff = Icon("zap-off")
var Zap = Icon("zap")
var ZoomIn = Icon("zoom-in")
var ZoomOut = Icon("zoom-out")

================
File: pkg/icons/icons.go
================
// Package icons provides a set of Lucide icons for use with the templ library.
package icons

import (
	"context"
	"embed"
	"fmt"
	"io"
	"strings"
	"sync"

	"github.com/a-h/templ"
)

// LucideVersion represents the version of Lucide icons used in this package.
const LucideVersion = "0.451.0"

var (
	iconContents = make(map[string]string)
	iconMutex    sync.RWMutex
)

//go:embed content/*.svg
var iconFS embed.FS

// IconProps defines the properties that can be set for an icon.
type IconProps struct {
	Size   string
	Color  string
	Fill   string
	Stroke string
	Class  string
}

// Icon returns a function that generates a templ.Component for the specified icon.
func Icon(name string) func(IconProps) templ.Component {
	return func(props IconProps) templ.Component {
		return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
			svg, err := generateSVG(name, props)
			if err != nil {
				return err
			}
			_, err = w.Write([]byte(svg))
			return
		})
	}
}

// generateSVG creates an SVG string for the specified icon with the given properties.
func generateSVG(name string, props IconProps) (string, error) {
	content, err := getIconContent(name)
	if err != nil {
		return "", err
	}

	size := props.Size
	if size == "" {
		size = "24"
	}

	fill := props.Fill
	if fill == "" {
		fill = "none"
	}

	stroke := props.Stroke
	if stroke == "" {
		stroke = props.Color
	}
	if stroke == "" {
		stroke = "currentColor"
	}

	return fmt.Sprintf(`<svg xmlns="http://www.w3.org/2000/svg" width="%s" height="%s" viewBox="0 0 24 24" fill="%s" stroke="%s" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="%s" data-lucide="icon">%s</svg>`,
		size, size, fill, stroke, props.Class, content), nil
}

// getIconContent retrieves the content of an icon, loading it if necessary.
func getIconContent(name string) (string, error) {
	iconMutex.RLock()
	content, exists := iconContents[name]
	iconMutex.RUnlock()

	if exists {
		return content, nil
	}

	iconMutex.Lock()
	defer iconMutex.Unlock()

	// Check again in case another goroutine has loaded the icon
	content, exists = iconContents[name]
	if exists {
		return content, nil
	}

	// Load the icon content
	content, err := loadIconContent(name)
	if err != nil {
		return "", err
	}

	iconContents[name] = content
	return content, nil
}

// loadIconContent reads the content of an icon from the embedded filesystem.
func loadIconContent(name string) (string, error) {
	content, err := iconFS.ReadFile(fmt.Sprintf("content/%s.svg", name))
	if err != nil {
		return "", fmt.Errorf("icon %s not found: %w", name, err)
	}
	return extractSVGContent(string(content)), nil
}

// extractSVGContent removes the outer SVG tags from the icon content.
func extractSVGContent(svgContent string) string {
	start := strings.Index(svgContent, ">") + 1
	end := strings.LastIndex(svgContent, "</svg>")
	if start == -1 || end == -1 {
		return ""
	}
	return strings.TrimSpace(svgContent[start:end])
}

================
File: pkg/styles/goilerplate.css
================
/*
! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --primary: 346.8 77.2% 49.8%;
  --primary-foreground: 355.7 100% 97.3%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --ring: 346.8 77.2% 49.8%;
  --radius: 0.5rem;
}

.dark {
  --background: 20 14.3% 4.1%;
  --foreground: 0 0% 95%;
  --muted: 0 0% 15%;
  --muted-foreground: 240 5% 64.9%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;
  --card: 24 9.8% 10%;
  --card-foreground: 0 0% 95%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 346.8 77.2% 49.8%;
  --primary-foreground: 355.7 100% 97.3%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 12 6.5% 15.1%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;
  --ring: 346.8 77.2% 49.8%;
  --radius: 0.5rem;
}

* {
  --tw-border-opacity: 1;
  border-color: hsl(var(--border) / var(--tw-border-opacity));
}

body {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity));
  font-feature-settings:
      "rlig" 1,
      "calt" 1;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0px;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-3 {
  top: 0.75rem;
}

.top-full {
  top: 100%;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-50 {
  z-index: 50;
}

.m-0 {
  margin: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.h-1\/2 {
  height: 50%;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-\[50vh\] {
  max-height: 50vh;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-3\/4 {
  width: 75%;
}

.w-4 {
  width: 1rem;
}

.w-56 {
  width: 14rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-full {
  width: 100%;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink {
  flex-shrink: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.columns-2 {
  -moz-columns: 2;
       columns: 2;
}

.columns-3 {
  -moz-columns: 3;
       columns: 3;
}

.columns-4 {
  -moz-columns: 4;
       columns: 4;
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-border > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: hsl(var(--border) / var(--tw-divide-opacity));
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: var(--radius);
}

.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}

.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.border-border {
  --tw-border-opacity: 1;
  border-color: hsl(var(--border) / var(--tw-border-opacity));
}

.border-destructive {
  --tw-border-opacity: 1;
  border-color: hsl(var(--destructive) / var(--tw-border-opacity));
}

.border-foreground {
  --tw-border-opacity: 1;
  border-color: hsl(var(--foreground) / var(--tw-border-opacity));
}

.border-input {
  --tw-border-opacity: 1;
  border-color: hsl(var(--input) / var(--tw-border-opacity));
}

.border-primary {
  --tw-border-opacity: 1;
  border-color: hsl(var(--primary) / var(--tw-border-opacity));
}

.border-transparent {
  border-color: transparent;
}

.bg-background {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity));
}

.bg-background\/80 {
  background-color: hsl(var(--background) / 0.8);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-card {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--card) / var(--tw-bg-opacity));
}

.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
}

.bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.bg-muted {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--muted) / var(--tw-bg-opacity));
}

.bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}

.bg-neutral-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity));
}

.bg-popover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--popover) / var(--tw-bg-opacity));
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity));
}

.bg-primary\/90 {
  background-color: hsl(var(--primary) / 0.9);
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-5 {
  padding-top: 1.25rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-none {
  line-height: 1;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.text-accent-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity));
}

.text-card-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--card-foreground) / var(--tw-text-opacity));
}

.text-destructive {
  --tw-text-opacity: 1;
  color: hsl(var(--destructive) / var(--tw-text-opacity));
}

.text-destructive-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--destructive-foreground) / var(--tw-text-opacity));
}

.text-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-muted-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity));
}

.text-popover-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--popover-foreground) / var(--tw-text-opacity));
}

.text-primary {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity));
}

.text-primary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity));
}

.text-secondary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--secondary-foreground) / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-80 {
  opacity: 0.8;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-black {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
}

.ring-opacity-5 {
  --tw-ring-opacity: 0.05;
}

.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background) / 1);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-75 {
  transition-duration: 75ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[start\:end\] {
  start: end;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-foreground::file-selector-button {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity));
}

.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity));
}

.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity));
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:inset-0::before {
  content: var(--tw-content);
  inset: 0px;
}

.before\:left-1\/2::before {
  content: var(--tw-content);
  left: 50%;
}

.before\:top-1\/2::before {
  content: var(--tw-content);
  top: 50%;
}

.before\:h-2::before {
  content: var(--tw-content);
  height: 0.5rem;
}

.before\:w-2::before {
  content: var(--tw-content);
  width: 0.5rem;
}

.before\:-translate-x-1\/2::before {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.before\:-translate-y-1\/2::before {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.before\:rounded-full::before {
  content: var(--tw-content);
  border-radius: 9999px;
}

.before\:bg-background::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:left-0\.5::after {
  content: var(--tw-content);
  left: 0.125rem;
}

.after\:top-0\.5::after {
  content: var(--tw-content);
  top: 0.125rem;
}

.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}

.after\:w-5::after {
  content: var(--tw-content);
  width: 1.25rem;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:bg-muted-foreground::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: hsl(var(--muted-foreground) / var(--tw-bg-opacity));
}

.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.checked\:border-primary:checked {
  --tw-border-opacity: 1;
  border-color: hsl(var(--primary) / var(--tw-border-opacity));
}

.checked\:bg-primary:checked {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity));
}

.checked\:before\:visible:checked::before {
  content: var(--tw-content);
  visibility: visible;
}

.checked\:before\:bg-primary:checked::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity));
}

.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity));
}

.hover\:bg-blue-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--muted) / var(--tw-bg-opacity));
}

.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

.hover\:text-accent-foreground:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity));
}

.hover\:text-foreground:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity));
}

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.hover\:text-primary\/80:hover {
  color: hsl(var(--primary) / 0.8);
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:outline:focus {
  outline-style: solid;
}

.focus\:outline-2:focus {
  outline-width: 2px;
}

.focus\:outline-offset-2:focus {
  outline-offset: 2px;
}

.focus\:outline-ring:focus {
  outline-color: hsl(var(--ring) / 1);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}

.focus\:ring-indigo-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}

.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.checked\:focus\:outline-primary:focus:checked {
  outline-color: hsl(var(--primary) / 1);
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background) / 1);
}

.active\:outline-offset-0:active {
  outline-offset: 0px;
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group:hover .group-hover\:block {
  display: block;
}

.group:hover .group-hover\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.peer:checked ~ .peer-checked\:visible {
  visibility: visible;
}

.peer:checked ~ .peer-checked\:bg-primary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity));
}

.peer:checked ~ .peer-checked\:text-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity));
}

.peer:checked ~ .peer-checked\:after\:translate-x-\[16px\]::after {
  content: var(--tw-content);
  --tw-translate-x: 16px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:after\:bg-secondary::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
}

.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}

.dark\:text-gray-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity));
}

.dark\:file\:text-foreground:is(.dark *)::file-selector-button {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity));
}

.dark\:hover\:bg-gray-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

@media (min-width: 640px) {
  .sm\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:h-1\/2 {
    height: 50%;
  }

  .sm\:max-w-\[70\%\] {
    max-width: 70%;
  }

  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:pb-4 {
    padding-bottom: 1rem;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:h-6 {
    height: 1.5rem;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .lg\:hidden {
    display: none;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }
}

.\[\&\:has\(\:disabled\)\]\:cursor-not-allowed:has(:disabled) {
  cursor: not-allowed;
}

.\[\&\:has\(\:disabled\)\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}

.\[\&\:has\(input\:checked\)\]\:text-foreground:has(input:checked) {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity));
}

.\[\&\:has\(input\:disabled\)\]\:cursor-not-allowed:has(input:disabled) {
  cursor: not-allowed;
}

.\[\&\:has\(input\:disabled\)\]\:opacity-50:has(input:disabled) {
  opacity: 0.5;
}

.\[\&\:has\(svg\)\]\:pl-11:has(svg) {
  padding-left: 2.75rem;
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}

.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}

.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}

.\[\&\[aria-expanded\=true\]\>svg\]\:rotate-180[aria-expanded=true]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

================
File: pkg/utils/utils.go
================
package utils

import (
	"fmt"

	"github.com/a-h/templ"

	twmerge "github.com/Oudwins/tailwind-merge-go"
)

// TwMerge combines Tailwind classes and handles conflicts.
// Later classes override earlier ones with the same base.
// Example: "bg-red-500 hover:bg-blue-500", "bg-green-500" → "hover:bg-blue-500 bg-green-500"
func TwMerge(classes ...string) string {
	return twmerge.Merge(classes...)
}

// CSS returns a link tag for the Goilerplate CSS
// If no branch is specified, it defaults to 'main'
func CSS(branch string) templ.Component {
	if branch == "" {
		branch = "main"
	}

	cssURL := fmt.Sprintf("https://cdn.jsdelivr.net/gh/axzilla/goilerplate@%s/pkg/styles/goilerplate.css", branch)
	return templ.Raw(fmt.Sprintf(`<link rel="stylesheet" href="%s">`, cssURL))
}

// Alpine returns script tags for Alpine.js
func AlpineJS() templ.Component {
	return templ.Raw(`
        <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    `)
}

================
File: .dockerignore
================
# Ignore node_modules folder
node_modules

# Ignore logs
logs
*.log
npm-debug.log*

# Ignore dotenv environment variable files
.env

# Ignore local development configuration files
config/local.yml

# Ignore temporary files and directories
tmp/
temp/
*.tmp

# Ignore build and cache directories
build/
dist/
.cache/

# Ignore OS generated files
.DS_Store
Thumbs.db

# Ignore version control directories and files
.git
.gitignore
.gitmodules
.hg
.hgignore
.hgsubstate
.svn
.cvsignore

# Ignore Python files
*.pyc
*.pyo
__pycache__/

# Ignore compiled source files
*.o
*.obj
*.dll
*.exe
*.out

# Ignore images and other binary files
*.png
*.jpg
*.jpeg
*.gif
*.bmp
*.tiff
*.ico

# Ignore compressed files
*.zip
*.tar.gz
*.rar
*.7z
*.bz2

# Ignore various IDE project files
.vscode/
.idea/
*.suo
*.user
*.userossc
*.sln.docstates
.project
.classpath
.settings/

# Ignore documentation files
*.md
*.pdf

# Ignore build output files
*.war
*.jar
*.ear

# Ignore Kubernetes and Docker Compose files
k8s/
docker-compose.yml
docker-compose.override.yml

# Ignore other sensitive files
*.pem
*.key
*.crt
*.kdb
*.jks

# Ignore IntelliJ IDEA files
*.iml
*.iws
.idea/

# Ignore JetBrains Rider files
*.sln.iml
.idea/

# Ignore WebStorm files
.idea/

# Ignore Visual Studio Code files
.vscode/

# Ignore SASS cache files
.sass-cache/

# Ignore Bower files
.bower/

# Ignore Gulp files
.gulp/

# Ignore Grunt files
.grunt/

# Ignore Yeoman files
.yeoman/

================
File: .env.example
================
GO_ENV=development

================
File: .gitignore
================
# exlude generated files but not for the pkg folder
internals/**/*_templ.go
internals/**/*_templ.txt

# exclude .txt files because they are not needed as a go package but the .go files are
pkg/**/*_templ.txt

.DS_Store
bin
node_modules
tmp
.env

================
File: CHEATSHEET.md
================
# Goilerplate Commit & Release Cheatsheet

## Commit Message Format

`<type>`: `<description>`

## Types

- `feat`: New feature or component
- `fix`: Bug fix
- `docs`: Documentation changes
- `style`: Changes that do not affect the meaning of the code (white-space, formatting, etc)
- `refactor`: Code change that neither fixes a bug nor adds a feature
- `perf`: Code change that improves performance
- `test`: Adding missing tests or correcting existing tests
- `chore`: Changes to the build process or auxiliary tools and libraries

## Examples

- `feat: add Button component`
- `fix: correct Card component padding on mobile`
- `refactor: simplify Modal component logic`

## Breaking Changes

Add `!` after the type for breaking changes:

- `feat!: redesign Form component API`

## Versioning Strategy (0.x.y)

- 0: Remains 0 until the first stable version (1.0.0)
- x: For major changes or feature sets (e.g., 20)
- y: For minor changes, bugfixes, and incremental updates

## Version Increments

- Increase second number (x) for:
  - New major features
  - Significant API or functionality changes
- Increase third number (y) for:
  - Bugfixes
  - Small feature additions
  - Documentation changes
  - Performance optimizations
  - Other minor changes

## Release Process

1. Commit changes:

   ```
   git add .
   git commit -m "feat: implement XYZ feature"
   ```

2. Tag and push version:

   ```
   git tag -a v0.20.2 -m "Release v0.20.2"
   git push origin main --tags
   ```

3. Create GitHub Release:
   - Go to GitHub > Releases > "Draft a new release"
   - Select the created tag
   - Title: "Release v0.20.2"
   - Description: Brief summary of main changes
   - Publish the release

## Go Module Usage

- Install latest version:
  ```
  go get github.com/axzilla/goilerplate@latest
  ```
- Install specific version:
  ```
  go get github.com/axzilla/goilerplate@v0.20.2
  ```
- Install development version:
  ```
  go get github.com/axzilla/goilerplate@main
  ```

Remind users to run `go mod tidy` after changes.

## Transition to 1.0.0

Switch to 1.0.0 when the project:

- Has a stable API
- Is sufficiently tested
- Is ready for production environments
- Offers a solid feature base

================
File: CONTRIBUTING.md
================
# Contributing to Goilerplate

First off, thank you for considering contributing to Goilerplate! We're excited to have you join our community.

## Our Vision and Your Contributions

Goilerplate is an open-source project that aims to provide value to the Go community. We want to be transparent about our long-term vision:

1. We may explore opportunities to monetize aspects of Goilerplate or offer premium services related to it in the future.
2. All contributions to this repository are subject to the MIT License, which allows for commercial use.
3. By contributing to Goilerplate, you agree that your contributions may be used in both open-source and potential future commercial aspects of the project.
4. We value every contribution and will always strive to maintain a strong, open-source core that benefits the entire community.

We believe this approach allows us to sustainably develop and maintain Goilerplate while keeping it open and accessible to all. If you have any questions or concerns about this, please reach out to us before contributing.

## How Can I Contribute?

### Reporting Bugs

- Use a clear and descriptive title for the issue to identify the problem.
- Describe the exact steps which reproduce the problem in as many details as possible.
- Provide specific examples to demonstrate the steps.

### Suggesting Enhancements

- Use a clear and descriptive title for the issue to identify the suggestion.
- Provide a step-by-step description of the suggested enhancement in as many details as possible.
- Explain why this enhancement would be useful to most Goilerplate users.

### Pull Requests

- Fill in the required template
- Do not include issue numbers in the PR title
- Follow the [Go style guide](https://golang.org/doc/effective_go.html)
- End all files with a newline
- Avoid platform-dependent code

## Style Guides

### Git Commit Messages

- Use the present tense ("Add feature" not "Added feature")
- Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
- Limit the first line to 72 characters or less

### Go Style Guide

Follow the official Go style guide and common practices in the Go community.

## Additional Notes

### Issue and Pull Request Labels

This section lists the labels we use to help us track and manage issues and pull requests.

- `bug` - Issues for bugs in the code
- `enhancement` - Issues for new features or improvements
- `documentation` - Issues related to documentation
- `good first issue` - Good for newcomers

## Recognition

We're committed to giving proper credit and recognition to all contributors. Your contributions, whether they're improvements to documentation, bug fixes, or new features, are invaluable to the growth and success of Goilerplate.

Thank you for contributing to Goilerplate and helping make it a great tool for the Go community!

================
File: Dockerfile
================
# Build-Stage
FROM golang:1.22-alpine AS build
WORKDIR /app

# Copy the source code
COPY . .

# Install templ
RUN go install github.com/a-h/templ/cmd/templ@latest

# Generate templ files
RUN templ generate

# Install build dependencies
RUN apk add --no-cache gcc musl-dev

# Build the application
RUN CGO_ENABLED=1 GOOS=linux go build -o main ./cmd/server/main.go

# Deploy-Stage
FROM alpine:3.20.2
WORKDIR /app

# Install ca-certificates
RUN apk add --no-cache ca-certificates

# Set environment variable for runtime
ENV GO_ENV=production

# Copy the binary from the build stage
COPY --from=build /app/main .

# Expose the port your application runs on
EXPOSE 8090

# Command to run the application
CMD ["./main"]

================
File: go.mod
================
module github.com/axzilla/goilerplate

go 1.22.4

require (
	github.com/Oudwins/tailwind-merge-go v0.2.0
	github.com/a-h/templ v0.2.778
	github.com/joho/godotenv v1.5.1
)

================
File: go.sum
================
github.com/Oudwins/tailwind-merge-go v0.2.0 h1:rtVHgYmLwwae4P+K6//ceRuUdyz3Bny6fo4664fOEmo=
github.com/Oudwins/tailwind-merge-go v0.2.0/go.mod h1:kkZodgOPvZQ8f7SIrlWkG/w1g9JTbtnptnePIh3V72U=
github.com/a-h/templ v0.2.778 h1:VzhOuvWECrwOec4790lcLlZpP4Iptt5Q4K9aFxQmtaM=
github.com/a-h/templ v0.2.778/go.mod h1:lq48JXoUvuQrU0VThrK31yFwdRjTCnIE5bcPCM9IP1w=
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

================
File: LICENSE
================
MIT License

Copyright (c) 2023 Axel Adrian

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================
File: Makefile
================
# Dev Tools
templ:
	templ generate --watch --proxy="http://localhost:8090" --open-browser=false -v

server:
	air \
	--build.cmd "go build -o tmp/bin/main ./cmd/server" \
	--build.bin "tmp/bin/main" \
	--build.delay "100" \
	--build.exclude_dir "node_modules" \
	--build.include_ext "go" \
	--build.stop_on_error "false" \
	--misc.clean_on_exit true

tailwind-app:
	npx tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch

tailwind-goilerplate:
	npx tailwindcss -c ./tailwind.config.lib.js -i ./assets/css/input.css -o ./pkg/styles/goilerplate.css --watch

dev:
	make -j4 templ server tailwind-app tailwind-goilerplate

debug:
	make -j3 templ tailwind-app tailwind-goilerplate

generate-icons:
	go run cmd/icongen/main.go

================
File: README.md
================
# Goilerplate

Modern UI Components for Go & Templ

<img src="./assets/img/gopher.svg" alt="Goilerplate Logo" width="200"/>

## About

Goilerplate is a growing library of modern UI components designed specifically for Go and Templ. It leverages Alpine.js for enhanced interactivity and Tailwind CSS for effortless styling. Whether you're building a small website or a large web application, Goilerplate provides the tools you need to create sleek, responsive interfaces with ease.

## Features

- **Go-native Implementation**: Optimized for Go developers, seamlessly integrating with Go backends.
- **Templ-first Design**: Leverages the full power of Templ for type-safe, high-performance templating.
- **Server-Side Rendering (SSR) Focus**: Excellent performance and SEO benefits out of the box.
- **Alpine.js Integration**: Enhanced client-side interactivity when needed.
- **Tailwind CSS Styling**: Modern, utility-first styling that's highly customizable.
- **Accessible Components**: Built with accessibility in mind, following WCAG guidelines.
- **TypeSafe**: Utilizing Go's type system for robust, error-resistant development.

## Getting Started

There are two main ways to use Goilerplate in your projects:

1. **Use as a Package Library**

   Install Goilerplate as a Go package:

   ```
   go get github.com/axzilla/goilerplate
   ```

   Then import and use components in your Templ files:

   ```go
   import "github.com/axzilla/goilerplate/pkg/components"

   // In your Templ files
   @components.Button(components.ButtonProps{Text: "Click me"})
   ```

2. **Copy Components to Your Codebase**

   Visit our [components documentation](https://goilerplate.com/docs/components) to find and copy the components you need directly into your project.

You can also mix and match these approaches based on your project needs.

For a quick start, check out our [Goilerplate quickstart](https://github.com/axzilla/goilerplate-quickstart) template, which provides a pre-configured setup using Goilerplate as a package library.

For detailed setup instructions and examples, visit our [how to use guide](https://goilerplate.com/docs/how-to-use).

## Components

Explore our growing list of components in the [components documentation](https://goilerplate.com/docs/components). Each component comes with usage examples and code snippets.

## Inspiration

Goilerplate draws inspiration from several popular UI libraries and frameworks:

- [shadcn/ui](https://ui.shadcn.com/)
- [Pines UI](https://devdojo.com/pines)
- [daisyUI](https://daisyui.com/)

We're exploring whether to make Goilerplate a strict port of shadcn/ui or to create a unique blend of various inspirations. The project is still evolving, and community feedback will play a crucial role in shaping its direction.

## Current Status

- **Heavy Development**: The project is under active development. Expect frequent updates and potential breaking changes until we reach a stable version.
- Actively growing component library
- Regular updates and bug fixes
- Continuous development based on community feedback

## Changelog

See [releases](https://github.com/axzilla/goilerplate/releases) for a detailed list of changes in each version.

## Contributing

We welcome contributions from the community! Whether it's adding new components, improving existing ones, or enhancing documentation, your input is valuable. Please check our [contributing guidelines](CONTRIBUTING.md) for more information on how to get involved.

## Feedback

Your feedback is crucial in shaping the future of Goilerplate. If you have suggestions, feature requests, or encounter any issues, please [open an issue](https://github.com/axzilla/goilerplate/issues) on our GitHub repository or reach out to us through our website.

## License

Goilerplate is open-source software licensed under the [MIT license](LICENSE).

## Support

For support, questions, or discussions, please [open an issue](https://github.com/axzilla/goilerplate/issues) on our GitHub repository.

---

Built with ❤️ by the Go community, for the Go community.

================
File: tailwind.config.js
================
import { fontFamily } from "tailwindcss/defaultTheme";

/** @type {import('tailwindcss').Config} */
const config = {
  darkMode: ["class"],
  content: ["./**/*.html", "./**/*.templ", "./**/*.go"],
  safelist: ["dark"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border) / <alpha-value>)",
        input: "hsl(var(--input) / <alpha-value>)",
        ring: "hsl(var(--ring) / <alpha-value>)",
        background: "hsl(var(--background) / <alpha-value>)",
        foreground: "hsl(var(--foreground) / <alpha-value>)",
        primary: {
          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
        },
        muted: {
          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
        },
        accent: {
          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
        },
        popover: {
          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
        },
        card: {
          DEFAULT: "hsl(var(--card) / <alpha-value>)",
          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: ["Inter", ...fontFamily.sans],
      },
    },
  },
};

export default config;

================
File: tailwind.config.lib.js
================
const baseConfig = require("./tailwind.config.js");

module.exports = {
  ...baseConfig,
  content: ["./pkg/**/*.templ", "./pkg/**/*.go"],
};