chore: adding remaining showcases

Makefile

@@ -47,7 +47,7 @@ build-html: templ-generate render-showcases
 
 # Step 4: Lint HTML output using ESLint
 lint-html:
-	npx eslint "out/**/*.html" --ext .html
+	npx eslint --fix "out/**/*.html" --ext .html
 
 # Step 6: Run full pipeline (build + lint)
 validate-html: build-html lint-html

cmd/render-showcases/main.go

@@ -28,6 +28,7 @@ func writeHTML(filename string, c templ.Component) error {
 
 func main() {
 	showcases := map[string]templ.Component{
+		// Accordion
 		"out/showcase/accordion_default.html": showcase.AccordionDefault(),
 
 		// Alert
@@ -104,6 +105,159 @@ func main() {
 		"out/showcase/chart_pie_legend.html":       showcase.ChartPieLegend(),
 		"out/showcase/chart_pie_stacked.html":      showcase.ChartPieStacked(),
 		"out/showcase/chart_radar.html":            showcase.ChartRadar(),
+
+		// Checkbox
+		"out/showcase/checkbox_card_default.html": showcase.CheckboxCardDefault(),
+		"out/showcase/checkbox_checked.html":      showcase.CheckboxChecked(),
+		"out/showcase/checkbox_custom_icon.html":  showcase.CheckboxCustomIcon(),
+		"out/showcase/checkbox_default.html":      showcase.CheckboxDefault(),
+		"out/showcase/checkbox_disabled.html":     showcase.CheckboxDisabled(),
+		"out/showcase/checkbox_form.html":         showcase.CheckboxForm(),
+		"out/showcase/checkbox_with_label.html":   showcase.CheckboxWithLabel(),
+
+		// Code
+		"out/showcase/code_copy_button.html": showcase.CodeCopyButton(),
+		"out/showcase/code_custom_size.html": showcase.CodeCustomSize(),
+		"out/showcase/code_default.html":     showcase.CodeDefault(),
+
+		// Date Picker
+		"out/showcase/date_picker_custom_placeholder.html": showcase.DatePickerCustomPlaceholder(),
+		"out/showcase/date_picker_default.html":            showcase.DatePickerDefault(),
+		"out/showcase/date_picker_disabled.html":           showcase.DatePickerDisabled(),
+		"out/showcase/date_picker_form.html":               showcase.DatePickerForm(),
+		"out/showcase/date_picker_formats.html":            showcase.DatePickerFormats(),
+		"out/showcase/date_picker_selected_date.html":      showcase.DatePickerSelectedDate(),
+		"out/showcase/date_picker_with_label.html":         showcase.DatePickerWithLabel(),
+
+		// Drawer
+		"out/showcase/drawer_default.html":   showcase.DrawerDefault(),
+		"out/showcase/drawer_positions.html": showcase.DrawerPositions(),
+
+		// Dropdown
+		"out/showcase/dropdown_default.html": showcase.DropdownDefault(),
+
+		// Icon
+		"out/showcase/icon_colored.html": showcase.IconColored(),
+		"out/showcase/icon_default.html": showcase.IconDefault(),
+		"out/showcase/icon_filled.html":  showcase.IconFilled(),
+		"out/showcase/icon_sizes.html":   showcase.IconSizes(),
+
+		// Input
+		"out/showcase/input_default.html":    showcase.InputDefault(),
+		"out/showcase/input_disabled.html":   showcase.InputDisabled(),
+		"out/showcase/input_file.html":       showcase.InputFile(),
+		"out/showcase/input_form.html":       showcase.InputForm(),
+		"out/showcase/input_with_label.html": showcase.InputWithLabel(),
+
+		// Input OTP
+		"out/showcase/input_otp_custom_length.html":  showcase.InputOTPCustomLength(),
+		"out/showcase/input_otp_custom_styling.html": showcase.InputOTPCustomStyling(),
+		"out/showcase/input_otp_default.html":        showcase.InputOTPDefault(),
+		"out/showcase/input_otp_form.html":           showcase.InputOTPForm(),
+		"out/showcase/input_otp_password_type.html":  showcase.InputOTPPasswordType(),
+		"out/showcase/input_otp_placeholder.html":    showcase.InputOTPPlaceholder(),
+		"out/showcase/input_otp_with_label.html":     showcase.InputOTPWithLabel(),
+
+		// Modal
+		"out/showcase/modal_default.html": showcase.ModalDefault(),
+
+		// Pagination
+		"out/showcase/pagination_default.html":     showcase.PaginationDefault(),
+		"out/showcase/pagination_with_helper.html": showcase.PaginationWithHelper(),
+
+		// Popover
+		"out/showcase/popover_default.html":   showcase.PopoverDefault(),
+		"out/showcase/popover_positions.html": showcase.PopoverPositions(),
+		"out/showcase/popover_triggers.html":  showcase.PopoverTriggers(),
+
+		// Progress
+		"out/showcase/progress_colors.html":  showcase.ProgressColors(),
+		"out/showcase/progress_default.html": showcase.ProgressDefault(),
+		"out/showcase/progress_sizes.html":   showcase.ProgressSizes(),
+
+		// Radio
+		"out/showcase/radio_card_default.html": showcase.RadioCardDefault(),
+		"out/showcase/radio_checked.html":      showcase.RadioChecked(),
+		"out/showcase/radio_default.html":      showcase.RadioDefault(),
+		"out/showcase/radio_disabled.html":     showcase.RadioDisabled(),
+		"out/showcase/radio_form.html":         showcase.RadioForm(),
+		"out/showcase/radio_with_label.html":   showcase.RadioWithLabel(),
+
+		// Rating
+		"out/showcase/rating_default.html":    showcase.RatingDefault(),
+		"out/showcase/rating_form.html":       showcase.RatingForm(),
+		"out/showcase/rating_max_values.html": showcase.RatingMaxValues(),
+		"out/showcase/rating_precision.html":  showcase.RatingPrecision(),
+		"out/showcase/rating_styles.html":     showcase.RatingStyles(),
+		"out/showcase/rating_with_label.html": showcase.RatingWithLabel(),
+
+		// Select Box
+		"out/showcase/select_box_default.html":    showcase.SelectBoxDefault(),
+		"out/showcase/select_box_disabled.html":   showcase.SelectBoxDisabled(),
+		"out/showcase/select_box_form.html":       showcase.SelectBoxForm(),
+		"out/showcase/select_box_with_label.html": showcase.SelectBoxWithLabel(),
+
+		// Separator
+		"out/showcase/separator_decorated.html": showcase.SeparatorDecorated(),
+		"out/showcase/separator_default.html":   showcase.SeparatorDefault(),
+		"out/showcase/separator_label.html":     showcase.SeparatorLabel(),
+		"out/showcase/separator_vertical.html":  showcase.SeparatorVertical(),
+
+		// Skeleton
+		"out/showcase/skeleton_card.html":      showcase.SkeletonCard(),
+		"out/showcase/skeleton_dashboard.html": showcase.SkeletonDashboard(),
+		"out/showcase/skeleton_default.html":   showcase.SkeletonDefault(),
+		"out/showcase/skeleton_profile.html":   showcase.SkeletonProfile(),
+
+		// Slider
+		"out/showcase/slider_default.html":        showcase.SliderDefault(),
+		"out/showcase/slider_disabled.html":       showcase.SliderDisabled(),
+		"out/showcase/slider_external_value.html": showcase.SliderExternalValue(),
+		"out/showcase/slider_steps.html":          showcase.SliderSteps(),
+		"out/showcase/slider_value.html":          showcase.SliderValue(),
+
+		// Spinner
+		"out/showcase/spinner_colors.html":    showcase.SpinnerColors(),
+		"out/showcase/spinner_default.html":   showcase.SpinnerDefault(),
+		"out/showcase/spinner_in_button.html": showcase.SpinnerInButton(),
+		"out/showcase/spinner_sizes.html":     showcase.SpinnerSizes(),
+
+		// Table
+		"out/showcase/table.html": showcase.Table(),
+
+		// Tabs
+		"out/showcase/tabs_default.html": showcase.TabsDefault(),
+
+		// Textarea
+		"out/showcase/textarea_auto_resize.html": showcase.TextareaAutoResize(),
+		"out/showcase/textarea_custom_rows.html": showcase.TextareaCustomRows(),
+		"out/showcase/textarea_default.html":     showcase.TextareaDefault(),
+		"out/showcase/textarea_disabled.html":    showcase.TextareaDisabled(),
+		"out/showcase/textarea_form.html":        showcase.TextareaForm(),
+		"out/showcase/textarea_with_label.html":  showcase.TextareaWithLabel(),
+
+		// Time Picker
+		"out/showcase/time_picker_12hour.html":             showcase.TimePicker12Hour(),
+		"out/showcase/time_picker_custom_placeholder.html": showcase.TimePickerCustomPlaceholder(),
+		"out/showcase/time_picker_default.html":            showcase.TimePickerDefault(),
+		"out/showcase/time_picker_form.html":               showcase.TimePickerForm(),
+		"out/showcase/time_picker_label.html":              showcase.TimePickerLabel(),
+		"out/showcase/time_picker_selected_time.html":      showcase.TimePickerSelectedTime(),
+
+		// Toast
+		"out/showcase/toast_default.html":    showcase.ToastDefault(),
+		"out/showcase/toast_playground.html": showcase.ToastPlayground(),
+
+		// Toggle
+		"out/showcase/toggle_checked.html":    showcase.ToggleChecked(),
+		"out/showcase/toggle_default.html":    showcase.ToggleDefault(),
+		"out/showcase/toggle_disabled.html":   showcase.ToggleDisabled(),
+		"out/showcase/toggle_form.html":       showcase.ToggleForm(),
+		"out/showcase/toggle_with_label.html": showcase.ToggleWithLabel(),
+
+		// Tooltip
+		"out/showcase/tooltip_default.html":   showcase.TooltipDefault(),
+		"out/showcase/tooltip_positions.html": showcase.TooltipPositions(),
 	}
 
 	for path, comp := range showcases {

component/drawer/drawer.templ

@@ -117,7 +117,9 @@ templ Content(props ...ContentProps) {
 		x-transition:leave-end="opacity-0"
 	></div>
 	<div
-		id={ p.ID + "-content" }
+		if p.ID != "" {
+			id={ p.ID + "-content" }
+		}
 		x-show="isOpen"
 		@click.away="close"
 		class={