feat(ui): Aspect Ratio component

Makefile

@@ -1,3 +1,4 @@
 gen:
 	templ generate
 	./tailwindcss -i ./static/css/input.css -o ./static/css/output.css --minify
+	go generate ./...

ui/aspect-ratio/root.templ

@@ -0,0 +1,61 @@
+package aspectratio
+
+import (
+	"fmt"
+	"github.com/Oudwins/tailwind-merge-go/pkg/twmerge"
+	"github.com/rotemhoresh/shadcn-templ/ui"
+)
+
+type RootProps struct {
+	ratio float32
+	ui.CoreProps
+}
+
+type RootOption = ui.Option[*RootProps]
+
+// note that `16/9` will result in `1`. you need to convert one of the numbers to float, e.g., `16.0/9.0`.
+func WithRatio(r float32) RootOption {
+	return func(p *RootProps) {
+		p.ratio = r
+	}
+}
+
+//go:generate go run ../optalias_generator.go -type=RootProps
+
+func Root(opts ...RootOption) templ.Component {
+	p := &RootProps{
+		ratio:     1 / 1,
+		CoreProps: ui.DefaultCoreProps,
+	}
+	for _, opt := range opts {
+		opt(p)
+	}
+	return root(p)
+}
+
+css rootStyle() {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+
+css rootWrapperStyle(r float32) {
+	position: relative;
+	width: 100%;
+	padding-bottom: { fmt.Sprintf("%.2f%%", 100/r) };
+}
+
+templ root(props *RootProps) {
+	<div
+		class={ rootWrapperStyle(props.ratio) }
+	>
+		<div
+			class={ rootStyle(), twmerge.Merge(props.Class()) }
+			{ props.Attrs()... }
+		>
+			{ children... }
+		</div>
+	</div>
+}

ui/button/root.templ

@@ -76,40 +76,40 @@ func (s Size) Class() string {
 	}
 }
 
+type RootProps struct {
+	typ     Type
+	variant Variant
+	size    Size
+	ui.CoreProps
+}
+
 type RootOption = ui.Option[*RootProps]
 
 func WithType(t Type) RootOption {
 	return func(p *RootProps) {
-		p.Type = t
+		p.typ = t
 	}
 }
 
 func WithVariant(v Variant) RootOption {
 	return func(p *RootProps) {
-		p.Variant = v
+		p.variant = v
 	}
 }
 
 func WithSize(s Size) RootOption {
 	return func(p *RootProps) {
-		p.Size = s
+		p.size = s
 	}
 }
 
 //go:generate go run ../optalias_generator.go -type=RootProps
 
-type RootProps struct {
-	Type    Type
-	Variant Variant
-	Size    Size
-	ui.CoreProps
-}
-
 func Root(opts ...RootOption) templ.Component {
 	p := &RootProps{
-		Type:      TypeButton,
-		Variant:   VariantDefault,
-		Size:      SizeDefault,
+		typ:       TypeButton,
+		variant:   VariantDefault,
+		size:      SizeDefault,
 		CoreProps: ui.DefaultCoreProps,
 	}
 	for _, opt := range opts {
@@ -120,8 +120,8 @@ func Root(opts ...RootOption) templ.Component {
 
 templ root(props *RootProps) {
 	<button
-		type={ props.Type.String() }
-		class={ twmerge.Merge(baseClass, props.Variant.Class(), props.Size.Class(), props.Class()) }
+		type={ props.typ.String() }
+		class={ twmerge.Merge(baseClass, props.variant.Class(), props.size.Class(), props.Class()) }
 		{ props.Attrs()... }
 	>
 		{ children... }