Merge branch 'dev' into main

Author: axzilla

Diff for: assets/css/output.css

@@ -22,14 +22,16 @@ func toastDemoHandler(w http.ResponseWriter, r *http.Request) {
 		duration = 0
 	}
 
+	fmt.Println("xxx", r.FormValue("description"))
 	toastProps := components.ToastProps{
-		Message:     r.FormValue("message"),
-		Type:        r.FormValue("type"),
-		Position:    r.FormValue("position"),
-		Duration:    duration,
-		Size:        r.FormValue("size"),
-		Dismissible: r.FormValue("dismissible") == "on",
-		Icon:        r.FormValue("icon") == "on",
+		Title:         r.FormValue("title"),
+		Description:   r.FormValue("description"),
+		Variant:       components.ToastVariant(r.FormValue("type")),
+		Position:      components.ToastPosition(r.FormValue("position")),
+		Duration:      duration,
+		Dismissible:   r.FormValue("dismissible") == "on",
+		ShowIndicator: r.FormValue("indicator") == "on",
+		Icon:          r.FormValue("icon") == "on",
 	}
 
 	components.Toast(toastProps).Render(r.Context(), w)
@@ -104,6 +106,7 @@ func main() {
 	mux.Handle("GET /docs/components/checkbox", templ.Handler(pages.Checkbox()))
 	mux.Handle("GET /docs/components/checkbox-card", templ.Handler(pages.CheckboxCard()))
 	mux.Handle("GET /docs/components/date-picker", templ.Handler(pages.DatePicker()))
+	mux.Handle("GET /docs/components/drawer", templ.Handler(pages.Drawer()))
 	mux.Handle("GET /docs/components/dropdown-menu", templ.Handler(pages.DropdownMenu()))
 	mux.Handle("GET /docs/components/form", templ.Handler(pages.Form()))
 	mux.Handle("GET /docs/components/icon", templ.Handler(pages.Icon()))
@@ -118,14 +121,13 @@ func main() {
 	mux.Handle("GET /docs/components/rating", templ.Handler(pages.Rating()))
 	mux.Handle("GET /docs/components/select", templ.Handler(pages.Select()))
 	mux.Handle("GET /docs/components/separator", templ.Handler(pages.Separator()))
-	mux.Handle("GET /docs/components/sheet", templ.Handler(pages.Sheet()))
 	mux.Handle("GET /docs/components/skeleton", templ.Handler(pages.Skeleton()))
 	mux.Handle("GET /docs/components/slider", templ.Handler(pages.Slider()))
 	mux.Handle("GET /docs/components/spinner", templ.Handler(pages.Spinner()))
 	mux.Handle("GET /docs/components/table", templ.Handler(pages.Table()))
 	mux.Handle("GET /docs/components/tabs", templ.Handler(pages.Tabs()))
 	mux.Handle("GET /docs/components/textarea", templ.Handler(pages.Textarea()))
-	mux.Handle("GET /docs/components/time-picker", templ.Handler(pages.TimePicker()))
+	// mux.Handle("GET /docs/components/time-picker", templ.Handler(pages.TimePicker()))
 	mux.Handle("GET /docs/components/toast", templ.Handler(pages.Toast()))
 	mux.Handle("GET /docs/components/toggle", templ.Handler(pages.Toggle()))
 	mux.Handle("GET /docs/components/tooltip", templ.Handler(pages.Tooltip()))

Diff for: cmd/server/main.go

@@ -5,54 +5,84 @@ import (
 	"github.com/axzilla/templui/utils"
 )
 
-type AccordionItem struct {
-	ID      string          // Unique identifier for state management
-	Trigger templ.Component // Header content that toggles section
-	Content templ.Component // Expandable section content
+type AccordionProps struct {
+	ID         string
+	Class      string
+	Attributes templ.Attributes
 }
 
-// AccordionProps configures the Accordion component
-type AccordionProps struct {
-	Items      []AccordionItem  // Array of accordion sections
-	Class      string           // Additional CSS classes
-	Attributes templ.Attributes // Additional HTML attributes
+type AccordionItemProps struct {
+	ID         string
+	Class      string
+	Attributes templ.Attributes
+	Value      string
+}
+
+type AccordionTriggerProps struct {
+	ID         string
+	Class      string
+	Attributes templ.Attributes
+}
+
+type AccordionContentProps struct {
+	ID         string
+	Class      string
+	Attributes templ.Attributes
 }
 
 templ Accordion(props AccordionProps) {
 	<div
 		class={ utils.TwMerge(
-            "divide-y rounded-md divide-border border",
-            props.Class,
-        ) }
+			"divide-y rounded-md divide-border border",
+			props.Class,
+		) }
+		{ props.Attributes... }
+	>
+		{ children... }
+	</div>
+}
+
+templ AccordionItem(props AccordionItemProps) {
+	<details
+		name="accordion"
+		class={ utils.TwMerge(
+			"group",
+			"open:[&>summary_svg]:rotate-180",
+			props.Class,
+		) }
+		data-value={ props.Value }
+		{ props.Attributes... }
+	>
+		{ children... }
+	</details>
+}
+
+templ AccordionTrigger(props AccordionTriggerProps) {
+	<summary
+		class={ utils.TwMerge(
+			"flex w-full items-center justify-between py-4 px-5",
+			"text-left font-medium cursor-pointer",
+			"transition-all hover:underline",
+			"list-none [&::-webkit-details-marker]:hidden",
+			props.Class,
+		) }
+		{ props.Attributes... }
+	>
+		<div class="flex-1">
+			{ children... }
+		</div>
+		@icons.ChevronDown(icons.IconProps{Size: "16", Class: "transition-transform"})
+	</summary>
+}
+
+templ AccordionContent(props AccordionContentProps) {
+	<div
+		class={ utils.TwMerge(
+			"px-5 pb-4 pt-0",
+			props.Class,
+		) }
 		{ props.Attributes... }
 	>
-		for _, item := range props.Items {
-			<details
-				name="accordion"
-				class={ utils.TwMerge(
-                "group",
-                "open:[&>summary_svg]:rotate-180",
-            ) }
-			>
-				<summary
-					class={ utils.TwMerge(
-                        "flex w-full items-center justify-between py-4 px-5",
-                        "text-left font-medium cursor-pointer",
-                        "transition-all hover:underline",
-                        "list-none [&::-webkit-details-marker]:hidden",
-                    ) }
-				>
-					@item.Trigger
-					@icons.ChevronDown(icons.IconProps{Size: "16", Class: "transition-transform"})
-				</summary>
-				<div
-					class={ utils.TwMerge(
-                        "px-5 pb-4 pt-0",
-                    ) }
-				>
-					@item.Content
-				</div>
-			</details>
-		}
+		{ children... }
 	</div>
 }