From 28209590d5ee52aded6eada2a42e5cbe9f6814e4 Mon Sep 17 00:00:00 2001
From: Ricardo Nogueira <ricardo@nogueira.cc>
Date: Wed, 2 Jul 2025 11:17:17 -0300
Subject: [PATCH] fix: ButtonToogleGroup initial value

---
 .../forms/button-toggle/ButtonToggleGroup.svelte | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/forms/button-toggle/ButtonToggleGroup.svelte b/src/lib/forms/button-toggle/ButtonToggleGroup.svelte
index c1850ca2fc..ec69f5892e 100644
--- a/src/lib/forms/button-toggle/ButtonToggleGroup.svelte
+++ b/src/lib/forms/button-toggle/ButtonToggleGroup.svelte
@@ -2,12 +2,24 @@
   import { setContext } from "svelte";
   import { type ButtonToggleGroupProps, buttonToggleGroup, cn } from "$lib";
 
-  let { multiSelect = false, name = "toggle-group", value = multiSelect ? [] : null, color, size = "md", roundedSize = "md", onSelect = (val: any) => {}, children, ctxIconClass, ctxBtnClass, class: className, ...restProps }: ButtonToggleGroupProps = $props();
+  let { multiSelect = false, name = "toggle-group", value = null, color, size = "md", roundedSize = "md", onSelect = (val: any) => {}, children, ctxIconClass, ctxBtnClass, class: className, ...restProps }: ButtonToggleGroupProps = $props();
 
   const base = $derived(buttonToggleGroup({ roundedSize }));
   type SelectedValue = string | null | string[];
 
-  let selectedValues = $state<SelectedValue>(multiSelect ? [] : null);
+  if (multiSelect) {
+    if (value === null) {
+      value = [];
+    } else if (typeof value === "string") {
+      value = [value];
+    }
+  } else {
+    if (Array.isArray(value)) {
+      value = value[0] || null;
+    }
+  }
+
+  let selectedValues = $state<SelectedValue>(value);
 
   interface ButtonToggleContext {
     toggleSelected: (toggleValue: string) => void;