flowbite-svelte 0.46.19 → 0.46.21

package/dist/skeleton/TestimonialPlaceholder.svelte

@@ -19,5 +19,5 @@ export let divClass = "animate-pulse";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'animate-pulse';
+@prop export let divClass: $$Props['divClass'] = 'animate-pulse';
 -->

package/dist/skeleton/TestimonialPlaceholder.svelte.d.ts

@@ -1,8 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        divClass?: string | undefined;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,7 +14,7 @@ export type TestimonialPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'animate-pulse';
+ * @prop export let divClass: $$Props['divClass'] = 'animate-pulse';
  */
 export default class TestimonialPlaceholder extends SvelteComponentTyped<TestimonialPlaceholderProps, TestimonialPlaceholderEvents, TestimonialPlaceholderSlots> {
 }

package/dist/skeleton/TextPlaceholder.svelte

@@ -49,6 +49,6 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'space-y-2.5 animate-pulse';
-@prop export let size: keyof Sizes = 'sm';
+@prop export let divClass: $$Props['divClass'] = 'space-y-2.5 animate-pulse';
+@prop export let size: NonNullable<$$Props['size']> = 'sm';
 -->

package/dist/skeleton/TextPlaceholder.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        divClass?: string | undefined;
-        size?: (string | number) | undefined;
+        divClass?: string;
+        size?: string | number;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,8 +15,8 @@ export type TextPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'space-y-2.5 animate-pulse';
- * @prop export let size: keyof Sizes = 'sm';
+ * @prop export let divClass: $$Props['divClass'] = 'space-y-2.5 animate-pulse';
+ * @prop export let size: NonNullable<$$Props['size']> = 'sm';
  */
 export default class TextPlaceholder extends SvelteComponentTyped<TextPlaceholderProps, TextPlaceholderEvents, TextPlaceholderSlots> {
 }

package/dist/skeleton/VideoPlaceholder.svelte

@@ -22,6 +22,6 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
-@prop export let size: keyof Sizes = 'sm';
+@prop export let divClass: $$Props['divClass'] = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
+@prop export let size: NonNullable<$$Props['size']> = 'sm';
 -->

package/dist/skeleton/VideoPlaceholder.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        divClass?: string | undefined;
-        size?: (string | number) | undefined;
+        divClass?: string;
+        size?: string | number;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,8 +15,8 @@ export type VideoPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
- * @prop export let size: keyof Sizes = 'sm';
+ * @prop export let divClass: $$Props['divClass'] = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
+ * @prop export let size: NonNullable<$$Props['size']> = 'sm';
  */
 export default class VideoPlaceholder extends SvelteComponentTyped<VideoPlaceholderProps, VideoPlaceholderEvents, VideoPlaceholderSlots> {
 }

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -21,5 +21,5 @@ export let divClass = "p-4 max-w-sm rounded border border-gray-200 shadow animat
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+@prop export let divClass: $$Props['divClass'] = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
 -->

package/dist/skeleton/WidgetPlaceholder.svelte.d.ts

@@ -1,8 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        divClass?: string | undefined;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,7 +14,7 @@ export type WidgetPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+ * @prop export let divClass: $$Props['divClass'] = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
  */
 export default class WidgetPlaceholder extends SvelteComponentTyped<WidgetPlaceholderProps, WidgetPlaceholderEvents, WidgetPlaceholderSlots> {
 }

package/dist/speed-dial/SpeedDial.svelte

@@ -22,6 +22,7 @@ let divClass;
 $: divClass = twMerge(defaultClass, "group", $$props.class);
 let poperClass;
 $: poperClass = twMerge(popperDefaultClass, ["top", "bottom"].includes(placement.split("-")[0]) && "flex-col");
+$: console.log(typeof $$restProps, Object.keys($$restProps));
 </script>
 
 <div class={divClass}>
@@ -55,15 +56,15 @@ $: poperClass = twMerge(popperDefaultClass, ["top", "bottom"].includes(placement
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let defaultClass: string = 'fixed end-6 bottom-6';
-@prop export let popperDefaultClass: string = 'flex items-center mb-4 gap-2';
-@prop export let placement: Placement = 'top';
-@prop export let pill: boolean = true;
-@prop export let tooltip: Placement | 'none' = 'left';
-@prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
-@prop export let textOutside: boolean = false;
-@prop export let id: string = generateId();
-@prop export let name: string = 'Open actions menu';
-@prop export let gradient: boolean = false;
-@prop export let open: boolean = false;
+@prop export let defaultClass: $$Props['defaultClass'] = 'fixed end-6 bottom-6';
+@prop export let popperDefaultClass: $$Props['popperDefaultClass'] = 'flex items-center mb-4 gap-2';
+@prop export let placement: NonNullable<$$Props['placement']> = 'top';
+@prop export let pill: NonNullable<$$Props['pill']> = true;
+@prop export let tooltip: NonNullable<$$Props['tooltip']> = 'left';
+@prop export let trigger: $$Props['trigger'] = 'hover';
+@prop export let textOutside: NonNullable<$$Props['textOutside']> = false;
+@prop export let id: $$Props['id'] = generateId();
+@prop export let name: $$Props['name'] = 'Open actions menu';
+@prop export let gradient: $$Props['gradient'] = false;
+@prop export let open: $$Props['open'] = false;
 -->

package/dist/speed-dial/SpeedDial.svelte.d.ts

@@ -6,19 +6,39 @@ export interface SpeedCtxType {
     textOutside: boolean;
 }
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        defaultClass?: string | undefined;
-        popperDefaultClass?: string | undefined;
-        placement?: Placement | undefined;
-        pill?: boolean | undefined;
-        tooltip?: (Placement | "none") | undefined;
-        trigger?: ("hover" | "click" | "focus") | undefined;
-        textOutside?: boolean | undefined;
-        id?: string | undefined;
-        name?: string | undefined;
-        gradient?: boolean | undefined;
-        open?: boolean | undefined;
+    props: (({
+        pill?: boolean;
+        outline?: boolean;
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
+        shadow?: boolean;
+        tag?: "a" | "button";
+        checked?: boolean;
+    } & Omit<import("svelte/elements").HTMLAnchorAttributes, "type"> & {
+        href?: string | undefined;
+    }) | ({
+        pill?: boolean;
+        outline?: boolean;
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
+        shadow?: boolean;
+        tag?: "a" | "button";
+        checked?: boolean;
+    } & import("svelte/elements").HTMLButtonAttributes & {
+        disabled?: import("svelte/elements").HTMLButtonAttributes["disabled"];
+        type?: import("svelte/elements").HTMLButtonAttributes["type"];
+    })) & {
+        defaultClass?: string;
+        popperDefaultClass?: string;
+        placement?: Placement;
+        pill?: boolean;
+        tooltip?: Placement | "none";
+        trigger?: "hover" | "click" | "focus";
+        textOutside?: boolean;
+        id?: string;
+        name?: string;
+        gradient?: boolean;
+        open?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -35,17 +55,17 @@ export type SpeedDialSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let defaultClass: string = 'fixed end-6 bottom-6';
- * @prop export let popperDefaultClass: string = 'flex items-center mb-4 gap-2';
- * @prop export let placement: Placement = 'top';
- * @prop export let pill: boolean = true;
- * @prop export let tooltip: Placement | 'none' = 'left';
- * @prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
- * @prop export let textOutside: boolean = false;
- * @prop export let id: string = generateId();
- * @prop export let name: string = 'Open actions menu';
- * @prop export let gradient: boolean = false;
- * @prop export let open: boolean = false;
+ * @prop export let defaultClass: $$Props['defaultClass'] = 'fixed end-6 bottom-6';
+ * @prop export let popperDefaultClass: $$Props['popperDefaultClass'] = 'flex items-center mb-4 gap-2';
+ * @prop export let placement: NonNullable<$$Props['placement']> = 'top';
+ * @prop export let pill: NonNullable<$$Props['pill']> = true;
+ * @prop export let tooltip: NonNullable<$$Props['tooltip']> = 'left';
+ * @prop export let trigger: $$Props['trigger'] = 'hover';
+ * @prop export let textOutside: NonNullable<$$Props['textOutside']> = false;
+ * @prop export let id: $$Props['id'] = generateId();
+ * @prop export let name: $$Props['name'] = 'Open actions menu';
+ * @prop export let gradient: $$Props['gradient'] = false;
+ * @prop export let open: $$Props['open'] = false;
  */
 export default class SpeedDial extends SvelteComponentTyped<SpeedDialProps, SpeedDialEvents, SpeedDialSlots> {
 }

package/dist/speed-dial/SpeedDialButton.svelte

@@ -33,11 +33,11 @@ $: btnClass = twMerge(btnDefaultClass, tooltip === "none" && "flex-col", textOut
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let btnDefaultClass: string = 'w-[52px] h-[52px] shadow-sm !p-2';
-@prop export let name: string = '';
-@prop export let tooltip: Placement | 'none' = context.tooltip;
-@prop export let pill: boolean = context.pill;
-@prop export let textOutside: boolean = context.textOutside;
-@prop export let textOutsideClass: string = 'block absolute -start-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
-@prop export let textDefaultClass: string = 'block mb-px text-xs font-medium';
+@prop export let btnDefaultClass: $$Props['defaultClass'] = 'w-[52px] h-[52px] shadow-sm !p-2';
+@prop export let name: $$Props['name'] = '';
+@prop export let tooltip: $$Props['tooltip'] = context.tooltip;
+@prop export let pill: $$Props['pill'] = context.pill;
+@prop export let textOutside: $$Props['textOutside'] = context.textOutside;
+@prop export let textOutsideClass: $$Props['textOutsideClass'] = 'block absolute -start-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
+@prop export let textDefaultClass: $$Props['textDefaultClass'] = 'block mb-px text-xs font-medium';
 -->

package/dist/speed-dial/SpeedDialButton.svelte.d.ts

@@ -1,15 +1,35 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Placement } from '@floating-ui/dom';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        btnDefaultClass?: string | undefined;
-        name?: string | undefined;
-        tooltip?: (Placement | "none") | undefined;
-        pill?: boolean | undefined;
-        textOutside?: boolean | undefined;
-        textOutsideClass?: string | undefined;
-        textDefaultClass?: string | undefined;
+    props: (({
+        pill?: boolean;
+        outline?: boolean;
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
+        shadow?: boolean;
+        tag?: "a" | "button";
+        checked?: boolean;
+    } & Omit<import("svelte/elements").HTMLAnchorAttributes, "type"> & {
+        href?: string | undefined;
+    }) | ({
+        pill?: boolean;
+        outline?: boolean;
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
+        shadow?: boolean;
+        tag?: "a" | "button";
+        checked?: boolean;
+    } & import("svelte/elements").HTMLButtonAttributes & {
+        disabled?: import("svelte/elements").HTMLButtonAttributes["disabled"];
+        type?: import("svelte/elements").HTMLButtonAttributes["type"];
+    })) & {
+        defaultClass?: string;
+        name?: string;
+        tooltip?: Placement | "none";
+        pill?: boolean;
+        textOutside?: boolean;
+        textOutsideClass?: string;
+        textDefaultClass?: string;
     };
     events: {
         click: MouseEvent;
@@ -26,13 +46,13 @@ export type SpeedDialButtonSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let btnDefaultClass: string = 'w-[52px] h-[52px] shadow-sm !p-2';
- * @prop export let name: string = '';
- * @prop export let tooltip: Placement | 'none' = context.tooltip;
- * @prop export let pill: boolean = context.pill;
- * @prop export let textOutside: boolean = context.textOutside;
- * @prop export let textOutsideClass: string = 'block absolute -start-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
- * @prop export let textDefaultClass: string = 'block mb-px text-xs font-medium';
+ * @prop export let btnDefaultClass: $$Props['defaultClass'] = 'w-[52px] h-[52px] shadow-sm !p-2';
+ * @prop export let name: $$Props['name'] = '';
+ * @prop export let tooltip: $$Props['tooltip'] = context.tooltip;
+ * @prop export let pill: $$Props['pill'] = context.pill;
+ * @prop export let textOutside: $$Props['textOutside'] = context.textOutside;
+ * @prop export let textOutsideClass: $$Props['textOutsideClass'] = 'block absolute -start-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2';
+ * @prop export let textDefaultClass: $$Props['textDefaultClass'] = 'block mb-px text-xs font-medium';
  */
 export default class SpeedDialButton extends SvelteComponentTyped<SpeedDialButtonProps, SpeedDialButtonEvents, SpeedDialButtonSlots> {
 }

package/dist/spinner/Spinner.svelte

@@ -33,10 +33,10 @@ let fillColorClass = color === void 0 ? "" : fillColorClasses[color] ?? fillColo
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let color: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined = 'primary';
-@prop export let bg: string = 'text-gray-300';
-@prop export let customColor: string = '';
-@prop export let size: string | number = '8';
-@prop export let currentFill: string = 'currentFill';
-@prop export let currentColor: string = 'currentColor';
+@prop export let color: $$Props['color'] = 'primary';
+@prop export let bg: $$Props['bg'] = 'text-gray-300';
+@prop export let customColor: $$Props['customColor'] = '';
+@prop export let size: $$Props['size'] = '8';
+@prop export let currentFill: $$Props['currentFill'] = 'currentFill';
+@prop export let currentColor: $$Props['currentColor'] = 'currentColor';
 -->

package/dist/spinner/Spinner.svelte.d.ts

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SVGAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        color?: "primary" | "blue" | "gray" | "green" | "red" | "yellow" | "pink" | "purple" | "white" | "custom" | undefined;
-        bg?: string | undefined;
-        customColor?: string | undefined;
-        size?: (string | number) | undefined;
-        currentFill?: string | undefined;
-        currentColor?: string | undefined;
+    props: SVGAttributes<SVGSVGElement> & {
+        color?: "primary" | "blue" | "gray" | "green" | "red" | "yellow" | "pink" | "purple" | "white" | "custom";
+        bg?: string;
+        size?: string | number;
+        currentFill?: string;
+        currentColor?: string;
+        customColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,12 +20,12 @@ export type SpinnerSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let color: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined = 'primary';
- * @prop export let bg: string = 'text-gray-300';
- * @prop export let customColor: string = '';
- * @prop export let size: string | number = '8';
- * @prop export let currentFill: string = 'currentFill';
- * @prop export let currentColor: string = 'currentColor';
+ * @prop export let color: $$Props['color'] = 'primary';
+ * @prop export let bg: $$Props['bg'] = 'text-gray-300';
+ * @prop export let customColor: $$Props['customColor'] = '';
+ * @prop export let size: $$Props['size'] = '8';
+ * @prop export let currentFill: $$Props['currentFill'] = 'currentFill';
+ * @prop export let currentColor: $$Props['currentColor'] = 'currentColor';
  */
 export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
 }

package/dist/steps/StepIndicator.svelte

@@ -61,12 +61,12 @@ const currentStepColors = {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let steps: string[] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
-@prop export let currentStep = 1;
-@prop export let size: string = 'h-2.5';
-@prop export let color: 'primary' | 'secondary' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'custom' = 'primary';
-@prop export let glow: boolean = false;
-@prop export let hideLabel: boolean = false;
-@prop export let completedCustom: string = '';
-@prop export let currentCustom: string = '';
+@prop export let steps: $$Props['steps'] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+@prop export let currentStep: $$Props['currentStep'] = 1;
+@prop export let size: $$Props['size'] = 'h-2.5';
+@prop export let color: $$Props['color'] = 'primary';
+@prop export let glow: $$Props['glow'] = false;
+@prop export let hideLabel: $$Props['hideLabel'] = false;
+@prop export let completedCustom: $$Props['completedCustom'] = '';
+@prop export let currentCustom: $$Props['currentCustom'] = '';
 -->

package/dist/steps/StepIndicator.svelte.d.ts

@@ -1,15 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        steps?: string[] | undefined;
-        currentStep?: number | undefined;
-        size?: string | undefined;
-        color?: ("primary" | "secondary" | "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "custom") | undefined;
-        glow?: boolean | undefined;
-        hideLabel?: boolean | undefined;
-        completedCustom?: string | undefined;
-        currentCustom?: string | undefined;
+    props: HTMLAttributes<HTMLElement> & {
+        steps: string[];
+        currentStep: number;
+        size: string;
+        color: "primary" | "secondary" | "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "custom";
+        glow: boolean;
+        hideLabel: boolean;
+        completedCustom: string;
+        currentCustom: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,14 +22,14 @@ export type StepIndicatorSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let steps: string[] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
- * @prop export let currentStep = 1;
- * @prop export let size: string = 'h-2.5';
- * @prop export let color: 'primary' | 'secondary' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'custom' = 'primary';
- * @prop export let glow: boolean = false;
- * @prop export let hideLabel: boolean = false;
- * @prop export let completedCustom: string = '';
- * @prop export let currentCustom: string = '';
+ * @prop export let steps: $$Props['steps'] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+ * @prop export let currentStep: $$Props['currentStep'] = 1;
+ * @prop export let size: $$Props['size'] = 'h-2.5';
+ * @prop export let color: $$Props['color'] = 'primary';
+ * @prop export let glow: $$Props['glow'] = false;
+ * @prop export let hideLabel: $$Props['hideLabel'] = false;
+ * @prop export let completedCustom: $$Props['completedCustom'] = '';
+ * @prop export let currentCustom: $$Props['currentCustom'] = '';
  */
 export default class StepIndicator extends SvelteComponentTyped<StepIndicatorProps, StepIndicatorEvents, StepIndicatorSlots> {
 }

package/dist/table/Table.svelte

@@ -40,7 +40,9 @@ const filterStore = writable(filter);
 setContext("searchTerm", searchTermStore);
 setContext("filter", filterStore);
 $: searchTermStore.set(searchTerm);
-$: filterStore.set(filter);
+$: {
+  if (filter) filterStore.set(filter);
+}
 setContext("sorter", writable(null));
 </script>
 
@@ -72,19 +74,19 @@ setContext("sorter", writable(null));
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'relative overflow-x-auto';
-@prop export let striped: boolean = false;
-@prop export let hoverable: boolean = false;
-@prop export let noborder: boolean = false;
-@prop export let shadow: boolean = false;
-@prop export let color: TableColorType = 'default';
-@prop export let customeColor: string = '';
-@prop export let items: T[] = [];
-@prop export let filter: ((t: T, term: string) => boolean) | null = null;
-@prop export let placeholder: string = 'Search';
-@prop export let innerDivClass: string = 'p-4';
-@prop export let searchClass: string = 'relative mt-1';
-@prop export let svgDivClass: string = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
-@prop export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+@prop export let divClass: $$Props['divClass'] = 'relative overflow-x-auto';
+@prop export let striped: $$Props['striped'] = false;
+@prop export let hoverable: $$Props['hoverable'] = false;
+@prop export let noborder: $$Props['noborder'] = false;
+@prop export let shadow: $$Props['shadow'] = false;
+@prop export let color: NonNullable<$$Props['color']> = 'default';
+@prop export let customeColor: $$Props['customeColor'] = '';
+@prop export let items: $$Props['items'] = [];
+@prop export let filter: $$Props['filter'] = null;
+@prop export let placeholder: $$Props['placeholder'] = 'Search';
+@prop export let innerDivClass: $$Props['innerDivClass'] = 'p-4';
+@prop export let searchClass: $$Props['searchClass'] = 'relative mt-1';
+@prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
+@prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+@prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 -->

package/dist/table/Table.svelte.d.ts

@@ -1,23 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLTableAttributes } from 'svelte/elements';
 import type { TableColorType } from '../types';
 declare class __sveltets_Render<T> {
-    props(): {
-        [x: string]: any;
-        divClass?: string | undefined;
-        striped?: boolean | undefined;
-        hoverable?: boolean | undefined;
-        noborder?: boolean | undefined;
-        shadow?: boolean | undefined;
-        color?: TableColorType | undefined;
-        customeColor?: string | undefined;
+    props(): HTMLTableAttributes & {
+        divClass?: string;
+        striped?: boolean;
+        hoverable?: boolean;
+        noborder?: boolean;
+        shadow?: boolean;
+        color?: TableColorType;
+        customeColor?: string;
         items?: T[] | undefined;
         filter?: ((t: T, term: string) => boolean) | null | undefined;
-        placeholder?: string | undefined;
-        innerDivClass?: string | undefined;
-        searchClass?: string | undefined;
-        svgDivClass?: string | undefined;
-        svgClass?: string | undefined;
-        inputClass?: string | undefined;
+        placeholder?: string;
+        innerDivClass?: string;
+        searchClass?: string;
+        svgDivClass?: string;
+        svgClass?: string;
+        inputClass?: string;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -35,21 +35,21 @@ export type TableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'relative overflow-x-auto';
- * @prop export let striped: boolean = false;
- * @prop export let hoverable: boolean = false;
- * @prop export let noborder: boolean = false;
- * @prop export let shadow: boolean = false;
- * @prop export let color: TableColorType = 'default';
- * @prop export let customeColor: string = '';
- * @prop export let items: T[] = [];
- * @prop export let filter: ((t: T, term: string) => boolean) | null = null;
- * @prop export let placeholder: string = 'Search';
- * @prop export let innerDivClass: string = 'p-4';
- * @prop export let searchClass: string = 'relative mt-1';
- * @prop export let svgDivClass: string = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
- * @prop export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
- * @prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+ * @prop export let divClass: $$Props['divClass'] = 'relative overflow-x-auto';
+ * @prop export let striped: $$Props['striped'] = false;
+ * @prop export let hoverable: $$Props['hoverable'] = false;
+ * @prop export let noborder: $$Props['noborder'] = false;
+ * @prop export let shadow: $$Props['shadow'] = false;
+ * @prop export let color: NonNullable<$$Props['color']> = 'default';
+ * @prop export let customeColor: $$Props['customeColor'] = '';
+ * @prop export let items: $$Props['items'] = [];
+ * @prop export let filter: $$Props['filter'] = null;
+ * @prop export let placeholder: $$Props['placeholder'] = 'Search';
+ * @prop export let innerDivClass: $$Props['innerDivClass'] = 'p-4';
+ * @prop export let searchClass: $$Props['searchClass'] = 'relative mt-1';
+ * @prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
+ * @prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+ * @prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
  */
 export default class Table<T> extends SvelteComponentTyped<TableProps<T>, TableEvents<T>, TableSlots<T>> {
 }

package/dist/table/TableBody.svelte

@@ -8,7 +8,7 @@ let sorter = getContext("sorter");
 $: sorted = $sorter ? filtered.toSorted((a, b) => $sorter.sortDirection * $sorter.sort(a, b)) : filtered;
 </script>
 
-<tbody class={tableBodyClass}>
+<tbody class={tableBodyClass} {...$$restProps}>
   <slot />
   {#each sorted as item}
     <slot name="row" {item} />
@@ -19,5 +19,5 @@ $: sorted = $sorter ? filtered.toSorted((a, b) => $sorter.sortDirection * $sorte
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let tableBodyClass: string | undefined = undefined;
+@prop export let tableBodyClass: $$Props['tableBodyClass'] = undefined;
 -->

package/dist/table/TableBody.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
 declare class __sveltets_Render<T> {
-    props(): {
-        tableBodyClass?: string | undefined;
+    props(): HTMLAttributes<HTMLTableSectionElement> & {
+        tableBodyClass?: string;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -19,7 +20,7 @@ export type TableBodySlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let tableBodyClass: string | undefined = undefined;
+ * @prop export let tableBodyClass: $$Props['tableBodyClass'] = undefined;
  */
 export default class TableBody<T> extends SvelteComponentTyped<TableBodyProps<T>, TableBodyEvents<T>, TableBodySlots<T>> {
 }