flowbite-svelte 1.18.0 → 1.18.1

package/dist/datepicker/Datepicker.svelte

@@ -107,8 +107,9 @@
         rangeFrom = day;
         rangeTo = undefined;
       } else if (day < rangeFrom) {
+        const oldRangeFrom = rangeFrom;
         rangeFrom = day;
-        rangeTo = rangeFrom;
+        rangeTo = oldRangeFrom;
       } else {
         rangeTo = day;
       }

package/dist/forms/button-toggle/ButtonToggleGroup.svelte

@@ -5,28 +5,46 @@
   import { buttonToggleGroup } from "./theme";
   import { getTheme } from "../../theme/themeUtils";
 
-  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 = multiSelect ? [] : null, color, size = "md", roundedSize = "md", onSelect = () => {}, children, ctxIconClass, ctxBtnClass, class: className, ...restProps }: ButtonToggleGroupProps = $props();
 
   const theme = getTheme("buttonToggleGroup");
 
   const base = $derived(buttonToggleGroup({ roundedSize, class: clsx(theme, className) }));
   type SelectedValue = string | null | string[];
 
-  let selectedValues = $state<SelectedValue>(multiSelect ? [] : null);
+  // Normalize incoming prop `value` to internal SelectedValue
+  // Clones arrays to prevent external mutations affecting internal state
+  function getInitialValue(): SelectedValue {
+    if (multiSelect) {
+      // Multi-select mode expects array
+      if (Array.isArray(value)) {
+        return [...value]; // Clone to prevent aliasing
+      } else if (value === null || value === undefined) {
+        return [];
+      } else {
+        // Single string passed but multiSelect is true - wrap in array
+        return [value as string];
+      }
+    } else {
+      // Single-select mode expects string or null
+      if (Array.isArray(value)) {
+        // Array passed but multiSelect is false - take first item
+        return value[0] ?? null;
+      } else {
+        return value;
+      }
+    }
+  }
+
+  let selectedValues = $state<SelectedValue>(getInitialValue());
 
   interface ButtonToggleContext {
     toggleSelected: (toggleValue: string) => void;
     isSelected: (toggleValue: string) => boolean;
   }
 
-  $effect(() => {
-    value = selectedValues;
-    onSelect(selectedValues);
-  });
-
   function toggleSelected(toggleValue: string) {
     if (multiSelect) {
-      // Handle multi-select mode
       const currentSelected = [...(selectedValues as string[])];
       const index = currentSelected.indexOf(toggleValue);
 
@@ -37,9 +55,9 @@
         selectedValues = currentSelected;
       }
     } else {
-      // Handle single-select mode
       selectedValues = toggleValue === selectedValues ? null : toggleValue;
     }
+    onSelect(selectedValues); // ✅ ADD THIS LINE - call onSelect here
   }
 
   function isSelected(toggleValue: string): boolean {

package/dist/types.d.ts

@@ -276,7 +276,7 @@ export type ButtonToggleGroupProps = HTMLAttributes<HTMLDivElement> & {
     color?: ButtonToggleVariants["color"];
     size?: ButtonToggleVariants["size"];
     roundedSize?: ButtonToggleVariants["roundedSize"];
-    onSelect?: (val: any) => void;
+    onSelect?: (val: string | null | string[]) => void;
     children: Snippet;
     ctxIconClass?: ClassValue;
     ctxBtnClass?: ClassValue;

package/dist/typography/hr/Hr.svelte

@@ -15,10 +15,12 @@
       innerDivClass: "content"
     }
   );
-  const styling = $derived({
-    div: divClass,
-    content: innerDivClass
-  });
+  const styling = $derived(
+    classes ?? {
+      div: divClass,
+      content: innerDivClass
+    }
+  );
 
   const theme = getTheme("hr");
   const bg = classes?.bg ?? "bg-gray-200 dark:bg-gray-700";
@@ -31,7 +33,7 @@
 </script>
 
 {#if children}
-  <div {...mergedDivProps} class={div({ class: clsx(theme?.div, divClass) })}>
+  <div {...mergedDivProps} class={div({ class: clsx(theme?.div, styling.div) })}>
     <hr {...mergedHrProps} class={base({ class: clsx(theme?.base, className, bg) })} />
     <div class={content({ class: clsx(theme?.content, styling.content) })}>
       {@render children()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {