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>
}

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"
	"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>
}

12345678910111213141516171819202122232425262728293031323334353637383940414243
package examples

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

templ AvatarColorsExample() {
	<div class="flex items-center gap-2">
		@popui.Avatar(props.Avatar{
			Initial: "XML",
			Color:   "document-xml",
			Size:    props.AvatarSizeLarge,
			Class:   "rounded-md font-mono",
		})
		@popui.Avatar(props.Avatar{
			Initial: "PDF",
			Color:   "document-pdf",
			Size:    props.AvatarSizeLarge,
			Class:   "rounded-md font-mono",
		})
		@popui.Avatar(props.Avatar{
			Initial: "PNG",
			Color:   "document-png",
			Size:    props.AvatarSizeLarge,
			Class:   "rounded-md font-mono",
		})
		@popui.Avatar(props.Avatar{
			Initial: "CSV",
			Size:    props.AvatarSizeLarge,
			Class:   "rounded-md font-mono",
		})
		@popui.Avatar(props.Avatar{
			Initial: "OK",
			Color:   "success",
			Size:    props.AvatarSizeLarge,
		})
		@popui.Avatar(props.Avatar{
			Initial: "JD",
			Color:   "accent",
		})
	</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
		}
	}
}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
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
		}
		<div class="flex items-center rounded-md bg-background-default-negative px-2 py-1.5">
			@popui.Button(props.Button{Variant: props.ButtonVariantInverse}) {
				@icons.Reload()
				Inverse
			}
		</div>
		@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>
}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
package examples

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

templ ButtonSplitExample() {
	@popui.ButtonGroup() {
		@popui.SplitButton(props.SplitButton{
			Label:  "Save",
			Button: props.Button{Variant: props.ButtonVariantPrimary},
		}) {
			@popui.MenuItem() {
				Save and close
			}
			@popui.MenuItem() {
				Save as draft
			}
			@popui.MenuItem() {
				Save as template
			}
		}
		@popui.SplitButton(props.SplitButton{
			Label: "Export",
		}) {
			@popui.MenuItem() {
				Export as PDF
			}
			@popui.MenuItem() {
				Export as CSV
			}
		}
		@popui.SplitButton(props.SplitButton{
			Label:  "Duplicate",
			Button: props.Button{Variant: props.ButtonVariantSecondary},
		}) {
			@popui.MenuItem() {
				Duplicate with edits
			}
			@popui.MenuItem() {
				Duplicate as draft
			}
		}
	}
}

1234567891011121314151617181920212223242526272829303132333435
package examples

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

templ ButtonSplitIconsExample() {
	@popui.ButtonGroup() {
		@popui.SplitButton(props.SplitButton{
			Label:  "New invoice",
			Icon:   icons.Add(),
			Button: props.Button{Variant: props.ButtonVariantPrimary},
		}) {
			@popui.MenuItem() {
				New credit note
			}
			@popui.MenuItem() {
				New receipt
			}
		}
		@popui.SplitButton(props.SplitButton{
			Label: "Download",
			Icon:  icons.Download(),
		}) {
			@popui.MenuItem() {
				Download as PDF
			}
			@popui.MenuItem() {
				Download as CSV
			}
		}
	}
}

12345678910111213141516171819202122232425262728293031323334353637383940414243
package examples

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

templ ButtonSplitSizesExample() {
	@popui.ButtonGroup() {
		@popui.SplitButton(props.SplitButton{
			Label:  "Small",
			Button: props.Button{Size: props.ButtonSizeSmall},
		}) {
			@popui.MenuItem() {
				Option one
			}
			@popui.MenuItem() {
				Option two
			}
		}
		@popui.SplitButton(props.SplitButton{
			Label: "Default",
		}) {
			@popui.MenuItem() {
				Option one
			}
			@popui.MenuItem() {
				Option two
			}
		}
		@popui.SplitButton(props.SplitButton{
			Label:  "Large",
			Button: props.Button{Size: props.ButtonSizeLarge},
		}) {
			@popui.MenuItem() {
				Option one
			}
			@popui.MenuItem() {
				Option two
			}
		}
	}
}

12345678910111213141516171819
package examples

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

templ ButtonCopyToClipboardExample() {
	<div class="flex items-center gap-4">
		@popui.Button(props.Button{
			Copy: "go get github.com/invopop/popui.go",
		})
		@popui.Button(props.Button{
			Copy:             "123e4567-e89b-12d3-a456-426614174000",
			CopyPrefixLength: 8,
			CopySuffixLength: 4,
		})
	</div>
}

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() {
			<ul class="grid grid-cols-3 gap-x-3">
				<li class="flex flex-col items-center py-3 px-2 rounded-md border border-border bg-background-default-secondary">
					<p class="text-foreground-default-secondary text-sm">Revenue</p>
					<p class="text-foreground text-xl font-medium">$12.5k</p>
				</li>
				<li class="flex flex-col items-center py-3 px-2 rounded-md border border-border bg-background-default-secondary">
					<p class="text-foreground-default-secondary text-sm">Orders</p>
					<p class="text-foreground text-xl font-medium">243</p>
				</li>
				<li class="flex flex-col items-center py-3 px-2 rounded-md border border-border bg-background-default-secondary">
					<p class="text-foreground-default-secondary text-sm">Customers</p>
					<p class="text-foreground text-xl font-medium">89</p>
				</li>
			</ul>
		}
	}
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
package examples

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

templ CardDeckExample() {
	@popui.CardDeck() {
		@popui.CardDeckHead() {
			<div class="flex items-center gap-1">
				<span>Oct 01, 2025</span>
				@icons.ArrowRight()
				<span>Oct 31, 2025</span>
			</div>
			@popui.TagStatus(props.TagStatus{Label: "Current", Status: "grey"})
		}
		@popui.Card(props.Card{Class: "flex-row items-center gap-1.5 p-3"}) {
			<div class="flex grow items-center gap-1.5">
				<span class="size-4 inline-flex items-center justify-center [&>svg]:size-full">
					@icons.Invopop()
				</span>
				<span class="font-medium text-foreground">Enterprise</span>
			</div>
			<div class="flex items-center gap-4">
				<div class="flex flex-wrap items-baseline gap-2 text-base justify-end">
					<div class="flex items-baseline gap-1 text-nowrap">
						<span class="text-foreground-default-secondary">Documents:</span>
						<span class="font-medium text-foreground">100</span>
					</div>
					<div class="h-3 w-px bg-background-default-tertiary-hover"></div>
					<div class="flex items-baseline gap-1 text-nowrap ">
						<span class="text-foreground-default-secondary">Price:</span>
						<span class="font-medium text-foreground">€0.00 / month</span>
					</div>
				</div>
				@popui.Menu(props.Menu{RightAlign: true}) {
					@popui.MenuItem() {
						@icons.Edit()
						<span>Edit</span>
					}
					@popui.MenuItem() {
						@icons.Delete()
						<span>Remove</span>
					}
				}
			</div>
		}
		@popui.Card(props.Card{Class: "flex-row items-center gap-1.5 p-3"}) {
			<div class="flex grow items-center gap-1.5">
				@popui.Image(props.Image{
					Src:   "https://assets.invopop.com/apps/chargebee/icon.svg",
					Alt:   "Chargebee",
					Class: "h-4 w-4 rounded-none",
				})
				<span class="font-medium text-foreground">Chargebee</span>
			</div>
			<div class="flex items-center gap-4">
				<div class="flex flex-wrap items-baseline gap-2 text-base justify-end">
					<div class="flex items-baseline gap-1">
						<span class="text-foreground-default-secondary">Seats:</span>
						<span class="font-medium text-foreground">10</span>
					</div>
					<div class="h-3 w-px bg-background-default-tertiary-hover"></div>
					<div class="flex items-baseline gap-1">
						<span class="text-foreground-default-secondary">Price:</span>
						<span class="font-medium text-foreground">€0.00 / month</span>
					</div>
				</div>
				@popui.Menu(props.Menu{RightAlign: true}) {
					@popui.MenuItem() {
						@icons.Edit()
						<span>Edit</span>
					}
					@popui.MenuItem() {
						@icons.Delete()
						<span>Remove</span>
					}
				}
			</div>
		}
	}
}

123456789101112131415161718192021222324252627282930313233343536373839404142
package examples

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

templ CardDeckAddressExample() {
	@popui.CardDeck() {
		@popui.CardDeckHead() {
			<span>Address</span>
			@popui.Button(props.Button{Size: "sm"}) {
				Manage
			}
		}
		@popui.Card(props.Card{Class: "p-3"}) {
			@popui.DescriptionList(props.DescriptionList{Class: "w-full space-y-3"}) {
				@popui.DescriptionListItem(props.DescriptionListItem{
					Label: "Company legal name",
					Value: "Invopop S.L. Billing",
				})
				@popui.DescriptionListItem(props.DescriptionListItem{
					Label: "Billing email",
					Value: "juan@invopop.com",
				})
				@popui.DescriptionListItem() {
					@popui.DT() {
						Address
					}
					@popui.DD(props.DD{Class: "flex flex-col"}) {
						<span>Calle Pradillo 42, Madrid</span>
						<span>Madrid, 28002, ES</span>
					}
				}
				@popui.DescriptionListItem(props.DescriptionListItem{
					Label: "Tax ID",
					Value: "ESX3157928M",
				})
			}
		}
	}
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
package examples

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

templ CardDeckPaymentExample() {
	@popui.CardDeck() {
		@popui.CardDeckHead() {
			<span>Payment</span>
			@popui.Button(props.Button{Size: "sm"}) {
				@icons.Add()
				<span>Add</span>
			}
		}
		@popui.Card(props.Card{Class: "flex-row items-center gap-1.5 p-3"}) {
			<div class="flex grow items-center gap-2">
				@popui.Image(props.Image{
					Src:   "https://assets.invopop.com/payment-methods/visa.svg",
					Alt:   "Visa",
					Class: "h-4 w-6 rounded-none object-contain",
				})
				<span class="font-medium text-foreground">· 3709</span>
				@popui.TagStatus(props.TagStatus{Label: "Default", Status: "grey"})
			</div>
			<div class="flex items-center gap-3">
				<span class="text-base text-foreground-default-secondary lining-nums tabular-nums">Exp 03/29</span>
				@popui.Menu(props.Menu{RightAlign: true}) {
					@popui.MenuItem() {
						@icons.Edit()
						<span>Edit</span>
					}
					@popui.MenuItem() {
						@icons.Delete()
						<span>Remove</span>
					}
				}
			</div>
		}
		@popui.Card(props.Card{Class: "flex-row items-center gap-1.5 p-3"}) {
			<div class="flex grow items-center gap-2">
				@popui.Image(props.Image{
					Src:   "https://assets.invopop.com/payment-methods/mastercard.svg",
					Alt:   "Mastercard",
					Class: "h-4 w-6 rounded-none object-contain",
				})
				<span class="font-medium text-foreground">· 8374</span>
			</div>
			<div class="flex items-center gap-3">
				<span class="text-base text-foreground-default-secondary lining-nums tabular-nums">Exp 11/32</span>
				@popui.Menu(props.Menu{RightAlign: true}) {
					@popui.MenuItem() {
						@icons.Edit()
						<span>Edit</span>
					}
					@popui.MenuItem() {
						@icons.Delete()
						<span>Remove</span>
					}
				}
			</div>
		}
	}
}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
package examples

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

templ CardDeckReorderExample() {
	// The cards are declared visa, mastercard, amex but carry Order 2, 3, 1, so
	// the deck sorts them to amex, visa, mastercard on load. Each committed move
	// renumbers every card's Order and dispatches popui-card-deck-reorder for
	// the page to persist.
	@popui.CardDeck(props.CardDeck{Reorderable: true, Name: "payment_order"}) {
		@popui.CardDeckHead() {
			<span>Payment</span>
			@popui.CardDeckReorderButton()
		}
		@popui.Card(props.Card{
			Order:      2,
			Href:       "#visa",
			Class:      "flex-row items-center gap-1.5 p-3",
			Attributes: templ.Attributes{"data-card-id": "visa"},
		}) {
			@cardDeckReorderRow("https://assets.invopop.com/payment-methods/visa.svg", "Visa", "· 3709", "Exp 03/29", true)
		}
		@popui.Card(props.Card{
			Order:      3,
			Href:       "#mastercard",
			Class:      "flex-row items-center gap-1.5 p-3",
			Attributes: templ.Attributes{"data-card-id": "mastercard"},
		}) {
			@cardDeckReorderRow("https://assets.invopop.com/payment-methods/mastercard.svg", "Mastercard", "· 8374", "Exp 11/32", false)
		}
		@popui.Card(props.Card{
			Order:      1,
			Href:       "#amex",
			Class:      "flex-row items-center gap-1.5 p-3",
			Attributes: templ.Attributes{"data-card-id": "amex"},
		}) {
			@cardDeckReorderRow("https://assets.invopop.com/payment-methods/amex.svg", "Amex", "· 1041", "Exp 07/28", false)
		}
	}
}

templ cardDeckReorderRow(logo, brand, digits, expiry string, isDefault bool) {
	// The Default tag sits with the digits rather than beside the expiry, so
	// every card's expiry lands in the same column.
	<div class="flex grow items-center gap-2">
		@popui.Image(props.Image{
			Src:   logo,
			Alt:   brand,
			Class: "h-4 w-6 rounded-none object-contain",
		})
		<span class="font-medium text-foreground">{ digits }</span>
		if isDefault {
			@popui.TagStatus(props.TagStatus{Label: "Default", Status: "grey"})
		}
	</div>
	<div class="flex items-center gap-3">
		<span class="text-base text-foreground-default-secondary lining-nums tabular-nums">{ expiry }</span>
		@popui.Menu(props.Menu{RightAlign: true}) {
			@popui.MenuItem() {
				@icons.Edit()
				<span>Edit</span>
			}
			@popui.MenuItem() {
				@icons.Delete()
				<span>Remove</span>
			}
		}
	</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",
		})
	}
}

1234567891011121314151617181920212223242526272829
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",
		}) {
			@popui.DD() {
				<a href="mailto:john@example.com">john@example.com</a>
			}
		}
		@popui.DescriptionListItem(props.DescriptionListItem{
			Value: "Administrator",
		}) {
			@popui.DT() {
				Role
			}
		}
	}
}

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>
				}
			}
		}
	}
}

12345678910111213141516171819202122232425262728293031
package examples

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

templ DescriptionListActionsExample() {
	@popui.DescriptionList() {
		@popui.DescriptionListItem(props.DescriptionListItem{Inline: true, Label: "Role", Value: "Director"})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Inline:       true,
			Label:        "Entry ID",
			Value:        "ee42413c-79fc-42d0-a7f7-65f76990ab20",
			PrefixLength: 8,
			SuffixLength: 4,
			Actions: []props.DescriptionListAction{
				{Icon: icons.Duplicate(), Copy: "ee42413c-79fc-42d0-a7f7-65f76990ab20", Attributes: templ.Attributes{"aria-label": "Copy"}},
				{Icon: icons.ExternalLink(), URL: templ.SafeURL("https://app.invopop.com/silo-entry/ee42413c-79fc-42d0-a7f7-65f76990ab20"), Attributes: templ.Attributes{"aria-label": "Open in a new tab"}},
			},
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Endpoint",
			Value: "0009:552100554",
			Actions: []props.DescriptionListAction{
				{Icon: icons.Duplicate(), Copy: "0009:552100554", Attributes: templ.Attributes{"aria-label": "Copy"}},
			},
		})
	}
}

12345678910111213141516171819202122232425262728293031
package examples

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

templ DescriptionListDetailViewExample() {
	<div class="w-[360px]">
		<h3 class="py-3 text-base font-medium text-foreground">Details</h3>
		@popui.DescriptionList(props.DescriptionList{Class: "w-full space-y-1 border-b border-border pb-4"}) {
			@popui.DescriptionListItem(props.DescriptionListItem{Inline: true, Label: "Role", Value: "Seller"})
			@popui.DescriptionListItem(props.DescriptionListItem{Inline: true, Label: "Status", Value: "Registered"})
			@popui.DescriptionListItem(props.DescriptionListItem{Inline: true, Label: "Country"})
			@popui.DescriptionListItem(props.DescriptionListItem{
				Inline:       true,
				Mono:         true,
				Label:        "ID",
				Value:        "01980ffb-94e1-7002-8f1d-3c5a2b7e9d44",
				PrefixLength: 8,
				SuffixLength: 4,
				Actions: []props.DescriptionListAction{
					{Icon: icons.Duplicate(), Copy: "01980ffb-94e1-7002-8f1d-3c5a2b7e9d44", Attributes: templ.Attributes{"aria-label": "Copy"}},
				},
			})
		}
		<h3 class="py-3 text-base font-medium text-foreground">Inboxes</h3>
		<p class="text-base text-foreground-default-secondary">No inboxes</p>
	</div>
}

1234567891011121314151617181920212223242526272829303132333435363738
package examples

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

// The tree is built once: it only changes when the GOBL dependency does.
// Descriptions roughly double the payload, and are what each row shows after
// the path.
var invoiceFields = goblfields.MustBuild("bill/invoice", goblfields.Options{Descriptions: true})

// An email body is a Go template over the envelope, so a pick is wrapped as
// {{.doc.<path>}} and dropped in at the caret — as a chip, since the body
// is a template editor.
var emailDraft = "Hello {{.doc.customer.name}},\n\nYour invoice {{.doc.code}} is ready. "

templ FieldPickerExample() {
	<div class="flex flex-col gap-2 w-full">
		@popui.Contenteditable(props.Textarea{
			ID:             "email-body",
			Name:           "body",
			Label:          "Email body",
			Rows:           3,
			Value:          emailDraft,
			VariableFormat: "{{.%s}}",
			ViewToggle:     true,
		})
		@popui.FieldPicker(props.FieldPicker{
			Root:   "bill/invoice",
			Fields: invoiceFields,
			Format: "{{.doc.%s}}",
			Target: "#email-body",
			ScalarsOnly: true,
		})
	</div>
}