feat(form items): improve timepicker examples

assets/css/output.css

@@ -366,6 +366,12 @@
   .left-full {
     left: 100%;
   }
+  .z-2 {
+    z-index: 2;
+  }
+  .z-3 {
+    z-index: 3;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -1498,6 +1504,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[y\:-񾨢Իq<EFBFBD>\1c <EFBFBD>\7f _<EFBFBD>\#<EFBFBD>y<EFBFBD>\1f \e \] {
+    y: -񾨢Իq<EFBFBD><EFBFBD> <EFBFBD>#<EFBFBD>y<EFBFBD>;
+  }
   .group-hover\:block {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {

internal/ui/pages/timepicker.templ

@@ -31,6 +31,30 @@ templ Timepicker() {
 					PreviewCodeFile:   "timepicker_12hour.templ",
 					ComponentCodeFile: "timepicker.templ",
 				})
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Label",
+					ShowcaseFile:      showcase.TimePickerLabel(),
+					PreviewCodeFile:   "timepicker_label.templ",
+					ComponentCodeFile: "timepicker.templ",
+				})
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Custom Placeholder",
+					ShowcaseFile:      showcase.TimePickerCustomPlaceholder(),
+					PreviewCodeFile:   "timepicker_custom_placeholder.templ",
+					ComponentCodeFile: "timepicker.templ",
+				})
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Selected Time",
+					ShowcaseFile:      showcase.TimePickerSelectedTime(),
+					PreviewCodeFile:   "timepicker_selected_time.templ",
+					ComponentCodeFile: "timepicker.templ",
+				})
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "With Form",
+					ShowcaseFile:      showcase.TimePickerForm(),
+					PreviewCodeFile:   "timepicker_form.templ",
+					ComponentCodeFile: "timepicker.templ",
+				})
 			}
 		}
 	}

internal/ui/showcase/timepicker_custom_placeholder.templ

@@ -0,0 +1,11 @@
+package showcase
+
+import "github.com/axzilla/templui/components"
+
+templ TimePickerCustomPlaceholder() {
+	<div class="w-full max-w-sm">
+		@components.Timepicker(components.TimepickerProps{
+			Placeholder: "When do you want to meet?",
+		})
+	</div>
+}

internal/ui/showcase/timepicker_form.templ

@@ -0,0 +1,26 @@
+package showcase
+
+import "github.com/axzilla/templui/components"
+
+templ TimePickerForm() {
+	<div class="w-full max-w-sm">
+		@components.FormItem(components.FormItemProps{}) {
+			@components.FormLabel(components.FormLabelProps{
+				Text: "Select a time",
+				For:  "timepicker-form",
+			})
+			@components.Timepicker(components.TimepickerProps{
+				ID:       "timepicker-form",
+				Name:     "timepicker-form",
+				HasError: true,
+			})
+			@components.FormDescription(components.FormDescriptionProps{}) {
+				Select a time from the dropdown.
+			}
+			@components.FormMessage(components.FormMessageProps{
+				Message: "Please select a time",
+				Type:    "error",
+			})
+		}
+	</div>
+}

internal/ui/showcase/timepicker_label.templ

@@ -0,0 +1,16 @@
+package showcase
+
+import "github.com/axzilla/templui/components"
+
+templ TimePickerLabel() {
+	<div class="flex flex-col gap-2 w-full max-w-sm">
+		@components.Label(components.LabelProps{
+			Text: "Select a time",
+			For:  "timepicker-label",
+		})
+		@components.Timepicker(components.TimepickerProps{
+			ID:         "timepicker-label",
+			Use12Hours: true,
+		})
+	</div>
+}

internal/ui/showcase/timepicker_selected_time.templ

@@ -0,0 +1,12 @@
+package showcase
+
+import "github.com/axzilla/templui/components"
+import "time"
+
+templ TimePickerSelectedTime() {
+	<div class="w-full max-w-sm">
+		@components.Timepicker(components.TimepickerProps{
+			Value: time.Now(),
+		})
+	</div>
+}