Remove internal package import from todo example

Replace direct internal/element usage with public ui package
components to ensure examples only use the public API:

- Add ui.RawCheckbox for plain checkbox without label wrapper
- Add ui.Span for span elements with text content
- Add View.TextDecoration modifier for strikethrough styling
- Update todo example to use these public components

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

examples/todo/main.go

@@ -6,7 +6,6 @@ import (
 	"fmt"
 	"syscall/js"
 
-	"git.flowmade.one/flowmade-one/iris/internal/element"
 	"git.flowmade.one/flowmade-one/iris/reactive"
 	"git.flowmade.one/flowmade-one/iris/ui"
 )
@@ -142,28 +141,19 @@ func todoItem(todo Todo, todos *reactive.Signal[[]Todo]) ui.View {
 	row.Display("flex").Gap("12px").Padding("8px 0").Width("100%").AlignItems("center")
 	row.BorderBottom("1px solid #eee")
 
-	// Completed checkbox
+	// Completed checkbox using public ui.RawCheckbox
-	checkbox := element.NewElement("input")
+	checkbox := ui.RawCheckbox(todo.Completed, func(isChecked bool) {
-	checkbox.Attr("type", "checkbox")
-	if todo.Completed {
-		checkbox.Set("checked", true)
-	}
-	checkbox.On("change", func() {
-		isChecked := checkbox.Get("checked").Bool()
 		toggleTodo(todos, todo.ID, isChecked)
 	})
-	checkboxView := ui.NewViewFromElement(checkbox)
 
 	// Todo text with strikethrough if completed
 	textView := ui.NewView()
 	textView.Display("flex").Width("100%")
-	text := element.NewElement("span")
+	text := ui.Span(todo.Text)
-	text.Set("textContent", todo.Text)
 	if todo.Completed {
-		text.Get("style").Call("setProperty", "text-decoration", "line-through")
+		text.TextDecoration("line-through").Color("#999")
-		text.Get("style").Call("setProperty", "color", "#999")
 	}
-	textView.Child(ui.NewViewFromElement(text))
+	textView.Child(text)
 
 	// Delete button
 	deleteBtn := ui.Button(func() {
@@ -171,7 +161,7 @@ func todoItem(todo Todo, todos *reactive.Signal[[]Todo]) ui.View {
 	}, ui.TextFromString("X"))
 	deleteBtn.Padding("4px 8px")
 
-	row.Child(checkboxView)
+	row.Child(checkbox)
 	row.Child(textView)
 	row.Child(deleteBtn)
 

ui/input.go

@@ -206,3 +206,22 @@ func NumberInput(value *reactive.Signal[float64], placeholder string) View {
 
 	return View{input}
 }
+// RawCheckbox creates a plain checkbox input without a label wrapper.
+// The onChange callback is called with the new checked state when the user clicks.
+func RawCheckbox(checked bool, onChange func(bool)) View {
+	checkbox := element.NewElement("input")
+	checkbox.Attr("type", "checkbox")
+
+	// Set initial state
+	if checked {
+		checkbox.Set("checked", true)
+	}
+
+	// Call onChange when user clicks
+	checkbox.On("change", func() {
+		newValue := checkbox.Get("checked").Bool()
+		onChange(newValue)
+	})
+
+	return View{checkbox}
+}

ui/modifiers.go

@@ -170,3 +170,8 @@ func (v View) PointerEvents(value string) View {
 	v.e.PointerEvents(value)
 	return v
 }
+
+func (v View) TextDecoration(value string) View {
+	v.e.Get("style").Call("setProperty", "text-decoration", value)
+	return v
+}

ui/text.go

@@ -21,3 +21,10 @@ func TextFromFunction(fn func() string) View {
 
 	return View{textNode}
 }
+
+// Span creates a span element with the given text content.
+func Span(text string) View {
+	v := View{element.NewElement("span")}
+	v.e.Set("textContent", text)
+	return v
+}