1234567891011121314151617181920212223242526272829303132
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ AppExample() {
	@popui.App(props.App{Title: "Application"}) {
		@popui.Header(props.Header{
			Breadcrumbs: []props.Breadcrumb{{Label: "Example"}},
		}) {
			@popui.Button(props.Button{Variant: "primary"}) {
				@icons.Add()
				<span>New Item</span>
			}
		}
		@popui.Main(props.Main{Center: true}) {
			@popui.Article() {
			@popui.Block(props.Block{
				Class: "items-center justify-center border border-dashed border-border-document-png bg-background-document-png rounded-2xl text-foreground-default-tertiary",
			}) {
				This is where the page contents goes.
				}
			}
		}
		@popui.Footer() {
			<span class="text-sm text-foreground-default-secondary">&copy; 2025 Invopop Inc.</span>
		}
	}
}

123456789101112131415161718192021222324252627
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ AppConfigExample() {
	@popui.App(props.App{Title: "Configure"}) {
		@popui.Main(props.Main{Center: true}) {
			@popui.Article() {
				@popui.Input(props.Input{
					ID:          "name-for-app-config",
					Label:       "Name",
					Type:        "text",
					Placeholder: "Your Name",
				})
				@popui.Input(props.Input{
					ID:          "email-for-app-config",
					Label:       "Email",
					Type:        "email",
					Placeholder: "email@example.com",
				})
			}
		}
	}
}

12345678910111213141516171819202122232425262728293031323334353637383940414243
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ AppPopupExample() {
	@popui.App(props.App{Title: "Application Popup"}) {
		@popui.Header(props.Header{
			Title: appPopupTitle(),
		}) {
			@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
				Add New
			}
		}
		@popui.Main() {
			@popui.Article(props.Article{FullWidth: true}) {
		<div class="w-full flex flex-1 items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl text-foreground-default-tertiary">
			This is where the page contents goes.
		</div>
			}
		}
		@popui.Footer() {
			@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
				Next
			}
		}
	}
}

templ appPopupTitle() {
	@popui.Button(props.Button{
		Variant: props.ButtonVariantTransparent,
		Class:   "p-2",
	}) {
		@icons.Close()
	}
	<span>
		Popup Example
	</span>
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ AppWithTableExample() {
	@popui.App(props.App{Title: "Application With Table"}) {
		@popui.Header(props.Header{
			Breadcrumbs: []props.Breadcrumb{{Label: "Example"}},
		}) {
			@popui.Button(props.Button{Variant: "primary"}) {
				@icons.Add()
				<span>New Item</span>
			}
		}
		@popui.Main() {
			@popui.Table() {
				<thead>
					<tr>
						<th>Invoice ID</th>
						<th>Customer</th>
						<th>Amount</th>
						<th>Status</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>INV-001</td>
						<td>Acme Corp</td>
						<td>$1,234.56</td>
						<td>Paid</td>
					</tr>
					<tr>
						<td>INV-002</td>
						<td>Tech Solutions</td>
						<td>$987.65</td>
						<td>Pending</td>
					</tr>
					<tr>
						<td>INV-003</td>
						<td>Global Inc</td>
						<td>$2,345.67</td>
						<td>Paid</td>
					</tr>
				</tbody>
			}
			@popui.TablePagination(props.TablePagination{
				CurrentPage:        1,
				TotalPages:         260,
				TotalItems:         25991,
				RowsPerPage:        100,
				RowsPerPageOptions: []int{10, 25, 50, 100, 250},
				ShowRowsPerPage:    true,
				ItemsLabel:         "invoices",
				FirstPageURL:       "?page=1",
				PrevPageURL:        "?page=0",
				NextPageURL:        "?page=2",
				LastPageURL:        "?page=260",
			}) {
				@popui.ButtonGroup() {
					@popui.Button(props.Button{
						Type:    "button",
						Size:    "sm",
						Variant: "secondary",
					}) {
						Create Invoice
					}
				}
			}
		}
	}
}

12345678910111213
package examples

import "github.com/invopop/popui.go"

templ CardExample() {
	@popui.Card() {
		@popui.CardContent() {
			<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl text-foreground-default-tertiary">
				Card content goes here
			</div>
		}
	}
}

12345678910111213141516171819202122232425
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CardWithHeaderExample() {
	@popui.Card() {
		@popui.CardHeader(props.CardHeader{
			Title:    "John Doe",
			Subtitle: "Software Engineer",
		}) {
			@popui.Avatar(props.Avatar{
				Size:    "lg",
				Initial: "J",
			})
		}
		@popui.CardContent() {
			<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl text-foreground-default-tertiary">
				This card includes a header with an avatar and title information.
			</div>
		}
	}
}

1234567891011121314151617181920
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CardDisabledExample() {
	@popui.Card(props.Card{Disabled: true}) {
		@popui.CardHeader(props.CardHeader{
			Title:    "Disabled Card",
			Subtitle: "Cannot be interacted with",
		})
		@popui.CardContent() {
			<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl text-foreground-default-tertiary">
				This card is disabled.
			</div>
		}
	}
}

123456789101112131415161718192021222324252627
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CardAsLinkExample() {
	@popui.Card(props.Card{
		Href: "/profile",
	}) {
		@popui.CardHeader(props.CardHeader{
			Title:    "Clickable Card",
			Subtitle: "Click anywhere to navigate",
		}) {
			@popui.Avatar(props.Avatar{
				Size:    "lg",
				Initial: "C",
			})
		}
		@popui.CardContent() {
			<div class="w-full flex items-center justify-center min-h-10 p-4 gap-2 border border-dashed border-border-document-png bg-background-document-png rounded-2xl text-foreground-default-tertiary">
				This entire card is clickable.
			</div>
		}
	}
}

123456789101112131415161718192021222324252627282930
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CardProgressBarExample() {
	@popui.Card() {
		@popui.CardHeader(props.CardHeader{
			Title:    "Usage Statistics",
			Subtitle: "Track your API consumption",
		}) {
			@popui.Avatar(props.Avatar{
				Size: "lg",
			}) {
				@popui.Image(props.Image{
					Src: "https://i.pravatar.cc/150?img=68",
					Alt: "Logo",
				})
			}
		}
		@popui.CardProgressBar(props.CardProgressBar{
			Title:    "API Requests",
			Subtitle: "This month",
			Current:  7500,
			Total:    10000,
		})
	}
}

12345678910111213141516171819202122232425262728293031
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CardDashboardExample() {
	@popui.Card() {
		@popui.CardHeader(props.CardHeader{
			Title:    "Monthly Overview",
			Subtitle: "Key performance metrics",
		})
		@popui.CardContent() {
			@popui.CardDashboard() {
				@popui.CardDashboardItem(props.CardDashboardItem{
					Label: "Revenue",
					Value: "$12.5k",
				})
				@popui.CardDashboardItem(props.CardDashboardItem{
					Label: "Orders",
					Value: "243",
				})
				@popui.CardDashboardItem(props.CardDashboardItem{
					Label: "Customers",
					Value: "89",
				})
			}
		}
	}
}

12345678910111213141516171819202122232425
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CardFileExample() {
	@popui.CardFile() {
		@popui.CardFileInfo(props.CardFileInfo{
			Label: "dni_back_already_stored.png",
		}) {
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Spanish_ID_card_%28back_side%29.webp/473px-Spanish_ID_card_%28back_side%29.webp.png?20210720095942" height="32" width="50"/>
		}
		@popui.Button(props.Button{
			Variant:  "transparent",
			Href:     "#",
			Download: true,
		}) {
			@icons.Download()
			Download
		}
	}
}

123456789101112131415161718
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ PageStateExample() {
	@popui.PageState(props.PageState{
		Illustration: popui.EmptyStateIcon(),
		Title:        "No results found",
		Description:  "Try adjusting your search or filter to find what you're looking for.",
	}) {
		@popui.Button(props.Button{Variant: "primary"}) {
			Clear filters
		}
	}
}

12345678910111213
package examples

import "github.com/invopop/popui.go"

templ SeparatorExample() {
	@popui.P() {
		Content above 
	}
	@popui.Separator()
	@popui.P() {
		Content below 
	}
}

123456789101112131415161718
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ SeparatorCustomSpacingExample() {
	@popui.P() {
		Content above 
	}
	@popui.Separator(props.Separator{
		Class: "my-8",
	})
	@popui.P() {
		Content below 
	}
}

12345678910111213141516171819202122232425262728293031
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ AccordionExample() {
	<div class="w-full space-y-2">
		@popui.Accordion(props.Accordion{Open: true}) {
			@popui.AccordionTrigger() {
				Is it accessible?
			}
			@popui.AccordionContent() {
				@popui.Description() {
					Yes. It uses native HTML details/summary elements for full keyboard navigation and screen reader support.
				}
			}
		}
		@popui.Accordion() {
			@popui.AccordionTrigger() {
				Is it styled?
			}
			@popui.AccordionContent() {
				@popui.Description() {
					Yes. It comes with default styles using Tailwind CSS that you can customize.
				}
			}
		}
	</div>
}

12345678910111213
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ AvatarExample() {
	<div class="flex items-center gap-4">
		@popui.Avatar(props.Avatar{Initial: "J"})
		@popui.Avatar(props.Avatar{Size: "lg", Initial: "X"})
	</div>
}

12345678910111213
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ AvatarSizesExample() {
	<div class="flex items-center gap-4">
		@popui.Avatar(props.Avatar{Initial: "D"})
		@popui.Avatar(props.Avatar{Size: "lg", Initial: "L"})
	</div>
}

1234567891011121314151617
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ AvatarWithImagesExample() {
	<div class="flex items-center gap-4">
		@popui.Avatar() {
			@popui.Image(props.Image{Src: "https://i.pravatar.cc/150?img=1"})
		}
		@popui.Avatar(props.Avatar{Size: "lg"}) {
			@popui.Image(props.Image{Src: "https://i.pravatar.cc/150?img=3"})
		}
	</div>
}

12345678910111213141516171819202122
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ BreadcrumbsExample() {
	@popui.Breadcrumbs() {
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Home",
			Href:  "/",
		})
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Products",
			Href:  "/products",
		})
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Electronics",
		})
	}
}

123456789101112131415161718192021222324
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ BreadcrumbsWithChildrenExample() {
	@popui.Breadcrumbs() {
		@popui.Breadcrumb(props.Breadcrumb{
			Href: "/",
		}) {
			<span>🏠 Home</span>
		}
		@popui.Breadcrumb(props.Breadcrumb{
			Href: "/products",
		}) {
			<span>📦 Products</span>
		}
		@popui.Breadcrumb(props.Breadcrumb{}) {
			<span>💻 Electronics</span>
		}
	}
}

12345678910111213141516171819202122232425262728293031323334
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ BreadcrumbsWithAttributesExample() {
	@popui.Breadcrumbs() {
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Home",
			Href:  "/",
			Attributes: templ.Attributes{
				"hx-get":      "/",
				"hx-target":   "#content",
				"hx-swap":     "innerHTML",
				"hx-push-url": "/",
			},
		})
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Products",
			Href:  "/products",
			Attributes: templ.Attributes{
				"hx-get":      "/products",
				"hx-target":   "#content",
				"hx-swap":     "innerHTML",
				"hx-push-url": "/products",
			},
		})
		@popui.Breadcrumb(props.Breadcrumb{
			Label: "Electronics",
		})
	}
}

1234567891011
package examples

import "github.com/invopop/popui.go"

templ ButtonExample() {
	@popui.ButtonGroup() {
		@popui.Button() {
			Default Button
		}
	}
}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ButtonVariantsExample() {
	@popui.ButtonGroup() {
		@popui.Button() {
			@icons.User()
			Default
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
			@icons.Download()
			Primary
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
			@icons.Settings()
			Secondary
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantDanger}) {
			@icons.Delete()
			Danger
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantTransparent}) {
			@icons.Lock()
			Transparent
		}
		@popui.Button(props.Button{Size: props.ButtonSizeIcon}) {
			@icons.Settings()
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantPrimary, Size: props.ButtonSizeIcon}) {
			@icons.Add()
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantSecondary, Size: props.ButtonSizeIcon}) {
			@icons.Settings()
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantDanger, Size: props.ButtonSizeIcon}) {
			@icons.Delete()
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantTransparent, Size: props.ButtonSizeIcon}) {
			@icons.Lock()
		}
	}
}

12345678910111213141516171819202122232425262728293031323334
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ButtonSizesExample() {
	@popui.ButtonGroup() {
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
			Size:    props.ButtonSizeSmall,
		}) {
			Small
		}
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
		}) {
			Default
		}
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
			Size:    props.ButtonSizeLarge,
		}) {
			Large
		}
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
			Size:    props.ButtonSizeIcon,
		}) {
			+
		}
	}
}

12345678910111213141516171819
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ButtonWithIconsExample() {
	@popui.ButtonGroup() {
		@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
			Save
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantDanger}) {
			@icons.Delete()
			Delete
		}
	}
}

1234567891011121314151617181920
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ButtonDisabledExample() {
	@popui.ButtonGroup() {
		@popui.Button(props.Button{Disabled: true}) {
			Disabled Default
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantPrimary, Disabled: true}) {
			Disabled Primary
		}
		@popui.Button(props.Button{Variant: props.ButtonVariantDanger, Disabled: true}) {
			Disabled Danger
		}
	}
}

123456789101112131415161718192021222324
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ButtonAnchorExample() {
	@popui.ButtonGroup() {
		@popui.Button(props.Button{
			Variant: props.ButtonVariantPrimary,
			Href:    "/docs",
		}) {
			Visit Website
		}
		@popui.Button(props.Button{
			Variant: props.ButtonVariantSecondary,
			Href:    "/docs",
			Target:  "_blank",
		}) {
			Open in New Tab
		}
	}
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
package examples

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ButtonGroupAlignExample() {
	<div class="space-y-4">
		<div>
			<p class="text-sm text-foreground-secondary mb-2">Left (default)</p>
			@popui.ButtonGroup() {
				@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
					@icons.Save()
					Save
				}
				@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
					Cancel
				}
			}
		</div>
		<div>
			<p class="text-sm text-foreground-secondary mb-2">Center</p>
			@popui.ButtonGroup(props.ButtonGroup{Align: props.ButtonGroupAlignCenter}) {
				@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
					@icons.Save()
					Save
				}
				@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
					Cancel
				}
			}
		</div>
		<div>
			<p class="text-sm text-foreground-secondary mb-2">Right</p>
			@popui.ButtonGroup(props.ButtonGroup{Align: props.ButtonGroupAlignRight}) {
				@popui.Button(props.Button{Variant: props.ButtonVariantPrimary}) {
					@icons.Save()
					Save
				}
				@popui.Button(props.Button{Variant: props.ButtonVariantSecondary}) {
					Cancel
				}
			}
		</div>
	</div>
}

1234567891011121314151617181920
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
	"github.com/invopop/popui.go/scripts"
)

templ ButtonCopyExample() {
	<html>
		<head>
			@scripts.ButtonCopy()
		</head>
		<body>
			@popui.ButtonCopy(props.ButtonCopy{
				Value: "e73d5d20834934588127389172381789bc2f275460",
			})
		</body>
	</html>
}

123456789101112131415161718192021222324252627282930
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ButtonCopyVariantsExample() {
	<div class="flex flex-col gap-2">
		@popui.ButtonCopy(props.ButtonCopy{
			Value: "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Variant: props.ButtonVariantPrimary,
			Value:   "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Variant: props.ButtonVariantSecondary,
			Value:   "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Variant: props.ButtonVariantDanger,
			Value:   "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Variant: props.ButtonVariantTransparent,
			Value:   "e73d5d20834934588127389172381789bc2f275460",
		})
	</div>
}

12345678910111213141516171819202122
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ButtonCopySizesExample() {
	<div class="flex flex-col gap-2">
		@popui.ButtonCopy(props.ButtonCopy{
			Size:  props.ButtonSizeSmall,
			Value: "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Value: "e73d5d20834934588127389172381789bc2f275460",
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Size:  props.ButtonSizeLarge,
			Value: "e73d5d20834934588127389172381789bc2f275460",
		})
	</div>
}

123456789101112131415161718192021
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ButtonCopyTruncatedExample() {
	<div class="flex items-center gap-4">
		@popui.ButtonCopy(props.ButtonCopy{
			Value:        "e73d5d20834934588127389172381789bc2f275460",
			PrefixLength: 4,
			SuffixLength: 4,
		})
		@popui.ButtonCopy(props.ButtonCopy{
			Value:        "123e4567-e89b-12d3-a456-426614174000",
			PrefixLength: 8,
			SuffixLength: 4,
		})
	</div>
}

12345678910111213
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CheckboxExample() {
	@popui.Checkbox(props.Checkbox{
		Name:  "terms",
		Label: "I agree to the terms and conditions",
	})
}

1234567891011121314
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CheckboxCheckedExample() {
	@popui.Checkbox(props.Checkbox{
		Name:    "newsletter",
		Label:   "Subscribe to newsletter",
		Checked: true,
	})
}

12345678910111213141516171819202122
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CheckboxDescriptionExample() {
	<div class="space-y-4">
		@popui.Checkbox(props.Checkbox{
			Name:        "marketing",
			Label:       "Marketing communications",
			Description: "Receive emails about new products, features, and more.",
		})
		@popui.Checkbox(props.Checkbox{
			Name:        "analytics",
			Label:       "Usage analytics",
			Description: "Help us improve by sharing anonymous usage data.",
			Checked:     true,
		})
	</div>
}

12345678910111213141516171819202122
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CheckboxSwitchExample() {
	<div class="space-y-3">
		@popui.Checkbox(props.Checkbox{
			Name:    "notifications",
			Label:   "Enable notifications",
			Variant: props.CheckboxVariantSwitch,
			Checked: true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:    "marketing",
			Label:   "Marketing emails",
			Variant: props.CheckboxVariantSwitch,
		})
	</div>
}

12345678910111213141516171819202122232425262728293031
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CheckboxSwitchDescriptionExample() {
	<div class="space-y-3">
		@popui.Checkbox(props.Checkbox{
			Name:        "notifications",
			Label:       "Push notifications",
			Description: "Get notified about important updates and messages.",
			Variant:     props.CheckboxVariantSwitch,
			Checked:     true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:        "marketing",
			Label:       "Marketing emails",
			Description: "Receive emails about new products and special offers.",
			Variant:     props.CheckboxVariantSwitch,
		})
		@popui.Checkbox(props.Checkbox{
			Name:        "analytics",
			Label:       "Usage analytics",
			Description: "Help us improve by sharing anonymous usage data.",
			Variant:     props.CheckboxVariantSwitch,
			Checked:     true,
		})
	</div>
}

12345678910111213141516171819202122232425262728
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CheckboxDisabledExample() {
	<div class="space-y-3">
		@popui.Checkbox(props.Checkbox{
			Name:     "option1",
			Label:    "Disabled checkbox",
			Disabled: true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:     "option2",
			Label:    "Disabled checked checkbox",
			Checked:  true,
			Disabled: true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:     "option3",
			Label:    "Disabled switch",
			Variant:  props.CheckboxVariantSwitch,
			Disabled: true,
		})
	</div>
}

1234567891011121314151617181920212223242526
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ CheckboxOptionGroupExample() {
	@popui.OptionGroup(props.OptionGroup{
		Label: "Select your interests",
	}) {
		@popui.Checkbox(props.Checkbox{
			Name:    "interest_design",
			Label:   "Design",
			Checked: true,
		})
		@popui.Checkbox(props.Checkbox{
			Name:  "interest_development",
			Label: "Development",
		})
		@popui.Checkbox(props.Checkbox{
			Name:  "interest_marketing",
			Label: "Marketing",
		})
	}
}

1234567891011121314151617
package examples

import "github.com/invopop/popui.go"

templ ContextMenuExample() {
	@popui.ContextMenu() {
		@popui.ContextMenuItem() {
			Edit
		}
		@popui.ContextMenuItem() {
			Duplicate
		}
		@popui.ContextMenuItem() {
			Delete
		}
	}
}

123456789101112131415161718192021222324
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ ContextMenuRightAlignedExample() {
	@popui.ContextMenu(props.ContextMenu{
		ID:          "context-menu-right",
		ButtonLabel: "···",
		RightAlign:  true,
	}) {
		@popui.ContextMenuItem() {
			Settings
		}
		@popui.ContextMenuItem() {
			Profile
		}
		@popui.ContextMenuItem() {
			Logout
		}
	}
}

1234567891011121314151617181920212223
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ DescriptionListExample() {
	@popui.DescriptionList() {
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Name",
			Value: "John Doe",
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Email",
			Value: "john@example.com",
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Role",
			Value: "Administrator",
		})
	}
}

123456789101112131415161718192021
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ DescriptionListCustomWidthExample() {
	@popui.DescriptionList(props.DescriptionList{
		Class: "w-full",
	}) {
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Company",
			Value: "Acme Corporation",
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Address",
			Value: "123 Main Street, City, Country",
		})
	}
}

1234567891011121314151617181920212223242526272829
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ DescriptionListRichTextExample() {
	@popui.DescriptionList() {
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Name",
			Value: "John Doe",
		})
		@popui.DescriptionListItem() {
			@popui.DT() {
				Bio 
			}
			@popui.DD() {
				@popui.Prose() {
					<p>Software engineer with expertise in <strong>Go</strong> and <strong>TypeScript</strong>.</p>
					<ul>
						<li>10+ years experience</li>
						<li>Open source contributor</li>
					</ul>
				}
			}
		}
	}
}

123456789101112131415161718192021222324
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FieldsetExample() {
	@popui.Fieldset() {
		@popui.Input(props.Input{
			ID:          "email",
			Name:        "email",
			Label:       "Email",
			Placeholder: "Enter your email",
		})
		@popui.Input(props.Input{
			ID:          "password",
			Name:        "password",
			Type:        "password",
			Label:       "Password",
			Placeholder: "Enter your password",
		})
	}
}

12345678910111213141516171819202122232425
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FieldsetWithLegendExample() {
	@popui.Fieldset(props.Fieldset{
		Legend: "Account Information",
	}) {
		@popui.Input(props.Input{
			ID:          "username",
			Name:        "username",
			Label:       "Username",
			Placeholder: "Choose a username",
		})
		@popui.Input(props.Input{
			ID:          "email2",
			Name:        "email",
			Label:       "Email",
			Placeholder: "your@email.com",
		})
	}
}

1234567891011121314151617181920212223242526
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FieldsetCardStyleExample() {
	@popui.Fieldset(props.Fieldset{
		Legend:  "Profile Settings",
		Variant: props.FieldsetVariantCard,
	}) {
		@popui.Input(props.Input{
			ID:          "name",
			Name:        "name",
			Label:       "Full Name",
			Placeholder: "John Doe",
		})
		@popui.Textarea(props.Textarea{
			ID:          "bio",
			Name:        "bio",
			Label:       "Bio",
			Placeholder: "Tell us about yourself",
		})
	}
}

123456789101112131415161718192021222324252627282930
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FieldsetHighlightedExample() {
	@popui.Fieldset(props.Fieldset{
		Legend:  "Sudo",
		Variant: "card",
		Class:   "bg-background-default-secondary",
	}) {
		@popui.Checkbox(props.Checkbox{
			ID:    "enterprise",
			Name:  "type",
			Label: "Enterprise",
			Value: "enterprise",
		})
		@popui.Input(props.Input{
			ID:          "stripe-id",
			Name:        "stripe_id",
			Label:       "Stripe ID",
			Placeholder: "Enter Stripe ID",
		})
		@popui.Info() {
			Remove the Stripe ID to force the creation of a new Stripe customer, thus allowing a new Tax ID to be uploaded.
		}
	}
}

123456789101112
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FileExample() {
	@popui.InputFile(props.InputFile{
		Name: "document",
	})
}

12345678910111213
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FileDisabledExample() {
	@popui.InputFile(props.InputFile{
		Name:     "document",
		Disabled: true,
	})
}

12345678910111213141516171819
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FileAcceptTypesExample() {
	<div class="space-y-4">
		@popui.InputFile(props.InputFile{
			Name:   "images",
			Accept: "image/*",
		})
		@popui.InputFile(props.InputFile{
			Name:   "documents",
			Accept: ".pdf,.doc,.docx",
		})
	</div>
}

1234567891011121314
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FileMultipleExample() {
	@popui.InputFile(props.InputFile{
		Name:     "photos",
		Multiple: true,
		Accept:   "image/*",
	})
}

12345678910111213
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FileUploadNoPreviewExample() {
	@popui.FileUpload(props.InputFile{
		Name: "profile-picture",
		Text: "Upload Profile Picture",
	})
}

123456789101112131415
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FileAvatarExample() {
	@popui.FileUpload(props.InputFile{
		Name:      "avatar",
		AvatarURL: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
		AvatarAlt: "User Avatar",
		Text:      "Change Avatar",
	})
}

12345678910111213141516
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FileSquarePreviewExample() {
	@popui.FileUpload(props.InputFile{
		Name:          "logo",
		AvatarURL:     "https://api.dicebear.com/7.x/shapes/svg?seed=Logo",
		AvatarAlt:     "Company Logo",
		Text:          "Upload Logo",
		PreviewSquare: true,
	})
}

12345678910111213141516171819202122
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FileWithButtonsExample() {
	@popui.FileUpload(props.InputFile{
		Name:      "avatar",
		AvatarURL: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
		AvatarAlt: "User Avatar",
		Text:      "Change Avatar",
	}) {
		@popui.Button(props.Button{
			Type: "button",
			Size: "sm",
		}) {
			Remove
		}
	}
}

1234567891011121314151617181920
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/css"
	"github.com/invopop/popui.go/props"
)

templ FlagExample() {
	<html>
		<head>
			@css.Flag()
		</head>
		<body>
			@popui.Flag(props.Flag{
				Country: "ES",
			})
		</body>
	</html>
}

12345678910111213141516171819202122232425
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/css"
	"github.com/invopop/popui.go/props"
)

templ FlagCountriesExample() {
	<html>
		<head>
			@css.Flag()
		</head>
		<body>
			<div class="flex gap-2">
				@popui.Flag(props.Flag{Country: "ES"})
				@popui.Flag(props.Flag{Country: "US"})
				@popui.Flag(props.Flag{Country: "GB"})
				@popui.Flag(props.Flag{Country: "FR"})
				@popui.Flag(props.Flag{Country: "DE"})
				@popui.Flag(props.Flag{Country: "IT"})
			</div>
		</body>
	</html>
}

12345678910111213141516171819202122232425262728293031
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/css"
	"github.com/invopop/popui.go/props"
)

templ FlagInContextExample() {
	<html>
		<head>
			@css.Flag()
		</head>
		<body>
			<div class="flex flex-col gap-2">
				<div class="flex items-center gap-2">
					@popui.Flag(props.Flag{Country: "ES"})
					<span class="text-sm">Spain</span>
				</div>
				<div class="flex items-center gap-2">
					@popui.Flag(props.Flag{Country: "US"})
					<span class="text-sm">United States</span>
				</div>
				<div class="flex items-center gap-2">
					@popui.Flag(props.Flag{Country: "GB"})
					<span class="text-sm">United Kingdom</span>
				</div>
			</div>
		</body>
	</html>
}

12345678910111213
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FlashMessageSuccessExample() {
	@popui.FlashMessage(props.FlashMessage{
		Type:    "success",
		Message: "Saved",
	})
}

12345678910111213
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FlashMessageCustomMessageExample() {
	@popui.FlashMessage(props.FlashMessage{
		Type:    "success",
		Message: "Profile updated successfully!",
	})
}

1234567891011121314151617181920212223242526272829303132333435
package examples

import (
	"github.com/invopop/popui.go"
	"github.com/invopop/popui.go/props"
)

templ FormExample() {
	@popui.Form(props.Form{
		Action: "/submit",
		Method: "POST",
	}) {
		@popui.Input(props.Input{
			ID:          "email",
			Name:        "email",
			Label:       "Email",
			Placeholder: "Enter your email",
		})
		@popui.Input(props.Input{
			ID:          "password",
			Name:        "password",
			Type:        "password",
			Label:       "Password",
			Placeholder: "Enter your password",
		})
		@popui.ButtonGroup() {
			@popui.Button(props.Button{
				Type:    "submit",
				Variant: props.ButtonVariantPrimary,
			}) {
				Submit
			}
		}
	}
}