flowbite-svelte 0.46.16 → 0.46.17

package/dist/cards/Card.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         img?: string;
         padding?: SizeType | "none";
         size?: SizeType | "none";
+        imgClass?: string;
     };
     events: {
         click: MouseEvent;

package/dist/carousel/Thumbnail.svelte

@@ -1,16 +1,18 @@
 <script>import { twMerge } from "tailwind-merge";
 export let selected = false;
+export let alt = "";
 export let activeClass = "opacity-100";
 export let inactiveClass = "opacity-60";
 </script>
 
-<img alt="..." {...$$restProps} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
+<img {...$$restProps} {alt} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let selected: boolean = false;
-@prop export let activeClass = 'opacity-100';
-@prop export let inactiveClass = 'opacity-60';
+@prop export let selected: $$Props['selected'] = false;
+@prop export let alt: $$Props['alt'] = '';
+@prop export let activeClass: $$Props['activeClass'] = 'opacity-100';
+@prop export let inactiveClass: $$Props['inactiveClass'] = 'opacity-60';
 -->

package/dist/carousel/Thumbnail.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLImgAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        selected?: boolean | undefined;
-        activeClass?: string | undefined;
-        inactiveClass?: string | undefined;
+    props: HTMLImgAttributes & {
+        selected?: boolean;
+        alt?: string;
+        activeClass?: string;
+        inactiveClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,9 +18,10 @@ export type ThumbnailSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let selected: boolean = false;
- * @prop export let activeClass = 'opacity-100';
- * @prop export let inactiveClass = 'opacity-60';
+ * @prop export let selected: $$Props['selected'] = false;
+ * @prop export let alt: $$Props['alt'] = '';
+ * @prop export let activeClass: $$Props['activeClass'] = 'opacity-100';
+ * @prop export let inactiveClass: $$Props['inactiveClass'] = 'opacity-60';
  */
 export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
 }

package/dist/forms/Input.svelte

@@ -5,10 +5,13 @@
 
 <script>import Wrapper from "../utils/Wrapper.svelte";
 import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
+import { createEventDispatcher, getContext } from "svelte";
+import CloseButton from "../utils/CloseButton.svelte";
+const dispatcher = createEventDispatcher();
 export let type = "text";
 export let value = void 0;
 export let size = void 0;
+export let clearable = false;
 export let defaultClass = "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right";
 export let color = "base";
 export let floatClass = "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400";
@@ -39,11 +42,16 @@ $: _size = size || clampSize(group?.size) || "md";
 let inputClass;
 $: {
   const _color = color === "base" && background ? "tinted" : color;
-  inputClass = twMerge([defaultClass, inputPadding[_size], $$slots.left && leftPadding[_size] || $$slots.right && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || "rounded-lg", group && "first:rounded-s-lg last:rounded-e-lg", group && "[&:not(:first-child)]:-ms-px", $$props.class]);
+  inputClass = twMerge([defaultClass, inputPadding[_size], $$slots.left && leftPadding[_size] || (clearable || $$slots.right) && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || "rounded-lg", group && "first:rounded-s-lg last:rounded-e-lg", group && "[&:not(:first-child)]:-ms-px", $$props.class]);
 }
+const clearAll = (e) => {
+  e.stopPropagation();
+  value = void 0;
+  dispatcher("change");
+};
 </script>
 
-<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
+<Wrapper class="relative w-full" show>
   {#if $$slots.left}
     <div class="{twMerge(floatClass, $$props.classLeft)} start-0 ps-2.5 pointer-events-none">
       <slot name="left" />
@@ -52,9 +60,14 @@ $: {
   <slot props={{ ...$$restProps, class: inputClass }}>
     <input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
   </slot>
-  {#if $$slots.right}
-    <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5"><slot name="right" /></div>
-  {/if}
+  <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5">
+    {#if $$slots.right}
+      <slot name="right"></slot>
+    {/if}
+    {#if clearable && value && `${value}`.length > 0}
+      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
+    {/if}
+  </div>
 </Wrapper>
 
 <!--
@@ -64,6 +77,7 @@ $: {
 @prop export let type: InputType = 'text';
 @prop export let value: any = undefined;
 @prop export let size: FormSizeType | undefined = undefined;
+@prop export let clearable = false;
 @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
 @prop export let color: 'base' | 'green' | 'red' = 'base';
 @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';

package/dist/forms/Input.svelte.d.ts

@@ -8,13 +8,14 @@ declare const __propDef: {
         type?: InputType | undefined;
         value?: any;
         size?: FormSizeType | undefined;
+        clearable?: boolean | undefined;
         defaultClass?: string | undefined;
         color?: ("base" | "green" | "red") | undefined;
         floatClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;
-        change: Event;
+        change: CustomEvent<any>;
         click: MouseEvent;
         contextmenu: MouseEvent;
         focus: FocusEvent;
@@ -48,6 +49,7 @@ export type InputSlots = typeof __propDef.slots;
  * @prop export let type: InputType = 'text';
  * @prop export let value: any = undefined;
  * @prop export let size: FormSizeType | undefined = undefined;
+ * @prop export let clearable = false;
  * @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
  * @prop export let color: 'base' | 'green' | 'red' = 'base';
  * @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';

package/dist/forms/MultiSelect.svelte

@@ -97,7 +97,7 @@ function handleKeyDown(event) {
   {/each}
 </select>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => (show = !show)} on:focusout={() => (show = false)} on:keydown={handleKeyDown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class)}>
+<div on:click|self={() => (show = !show)} on:focusout={() => (show = false)} on:keydown={handleKeyDown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class)}>
   {#if !selectItems.length}
     <span class="text-gray-400">{placeholder}</span>
   {/if}
@@ -117,7 +117,7 @@ function handleKeyDown(event) {
       <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
     {/if}
     <div class="w-[1px] bg-gray-300 dark:bg-gray-600"></div>
-    <svg class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+    <svg on:click|self={() => (show = !show)} class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
     </svg>
   </div>

package/dist/forms/Search.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
     };
     events: {
         blur: FocusEvent;
-        change: Event;
+        change: CustomEvent<any>;
         input: Event;
         click: MouseEvent;
         focus: FocusEvent;

package/dist/list-group/Listgroup.svelte

@@ -1,4 +1,4 @@
-<script>import { createEventDispatcher, setContext } from "svelte";
+<script generics="T extends ListGroupItemType | string">import { createEventDispatcher, setContext } from "svelte";
 import { twMerge } from "tailwind-merge";
 import Frame from "../utils/Frame.svelte";
 import ListgroupItem from "./ListgroupItem.svelte";
@@ -28,7 +28,7 @@ $: groupClass = twMerge(defaultClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let items: ListGroupItemType[] | string[] = [];
+@prop export let items: T[] = [];
 @prop export let active: boolean = false;
 @prop export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
 -->

package/dist/list-group/Listgroup.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ListGroupItemType } from '../types';
-declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+declare class __sveltets_Render<T extends ListGroupItemType | string> {
+    props(): import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
@@ -16,31 +16,31 @@ declare const __propDef: {
         transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
         params?: any;
     } & {
-        items?: ListGroupItemType[] | string[];
+        items?: T[] | undefined;
         active?: boolean;
     };
-    events: {
+    events(): {
         click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {
-            item: string;
+            item: T;
             index: number;
         };
     };
-};
-export type ListgroupProps = typeof __propDef.props;
-export type ListgroupEvents = typeof __propDef.events;
-export type ListgroupSlots = typeof __propDef.slots;
+}
+export type ListgroupProps<T extends ListGroupItemType | string> = ReturnType<__sveltets_Render<T>['props']>;
+export type ListgroupEvents<T extends ListGroupItemType | string> = ReturnType<__sveltets_Render<T>['events']>;
+export type ListgroupSlots<T extends ListGroupItemType | string> = ReturnType<__sveltets_Render<T>['slots']>;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let items: ListGroupItemType[] | string[] = [];
+ * @prop export let items: T[] = [];
  * @prop export let active: boolean = false;
  * @prop export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
  */
-export default class Listgroup extends SvelteComponentTyped<ListgroupProps, ListgroupEvents, ListgroupSlots> {
+export default class Listgroup<T extends ListGroupItemType | string> extends SvelteComponentTyped<ListgroupProps<T>, ListgroupEvents<T>, ListgroupSlots<T>> {
 }
 export {};

package/dist/progress/Progressbar.svelte

@@ -1,6 +1,6 @@
 <script>import { cubicOut } from "svelte/easing";
 import { tweened } from "svelte/motion";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twMerge } from "tailwind-merge";
 export let progress = "45";
 export let precision = 0;
 export let tweenDuration = 400;
@@ -12,6 +12,7 @@ export let easing = cubicOut;
 export let color = "primary";
 export let labelInsideClass = "text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full";
 export let divClass = "w-full bg-gray-200 rounded-full dark:bg-gray-700";
+export let progressClass;
 const _progress = tweened(0, {
   duration: animate ? tweenDuration : 0,
   easing
@@ -37,11 +38,11 @@ $: _progress.set(Number(progress));
 {/if}
 <div class={twMerge(divClass, size, $$props.class)}>
   {#if labelInside}
-    <div class={twJoin(labelInsideClass, barColors[color])} style="width: {$_progress}%">
+    <div class={twMerge(barColors[color], labelInsideClass)} style="width: {$_progress}%">
       {$_progress.toFixed(precision)}%
     </div>
   {:else}
-    <div class={twJoin(barColors[color], size, 'rounded-full')} style="width: {$_progress}%"></div>
+    <div class={twMerge(barColors[color], size, 'rounded-full', progressClass)} style="width: {$_progress}%"></div>
   {/if}
 </div>
 
@@ -60,4 +61,5 @@ $: _progress.set(Number(progress));
 @prop export let color: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
 @prop export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
 @prop export let divClass: string = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
+@prop export let progressClass: string;
 -->

package/dist/progress/Progressbar.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         color?: ("primary" | "blue" | "gray" | "red" | "green" | "yellow" | "purple" | "indigo") | undefined;
         labelInsideClass?: string | undefined;
         divClass?: string | undefined;
+        progressClass: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -37,6 +38,7 @@ export type ProgressbarSlots = typeof __propDef.slots;
  * @prop export let color: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
  * @prop export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
  * @prop export let divClass: string = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
+ * @prop export let progressClass: string;
  */
 export default class Progressbar extends SvelteComponentTyped<ProgressbarProps, ProgressbarEvents, ProgressbarSlots> {
 }

package/dist/rating/Rating.svelte

@@ -8,28 +8,30 @@ export let rating = 4;
 export let partialId = "partialStar" + generateId();
 export let icon = Star;
 export let count = false;
+export let iconFillColor;
+export let iconStrokeColor;
 const fullStarId = generateId();
 const grayStarId = generateId();
-let fullStars = Math.floor(rating);
-let rateDiffence = rating - fullStars;
-let percentRating = Math.round(rateDiffence * 100);
-let grayStars = total - (fullStars + Math.ceil(rateDiffence));
+$: fullStars = Math.floor(rating);
+$: rateDiffence = rating - fullStars;
+$: percentRating = Math.round(rateDiffence * 100);
+$: grayStars = total - (fullStars + Math.ceil(rateDiffence));
 </script>
 
 <div class={twMerge(divClass, $$props.class)}>
   {#if count}
-    <svelte:component this={icon} fillPercent={100} {size} />
+    <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} fillPercent={100} {size} />
     <p class="ms-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
     <slot />
   {:else}
     {#each Array(fullStars) as star}
-      <svelte:component this={icon} {size} fillPercent={100} id={fullStarId} />
+      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={100} id={fullStarId} />
     {/each}
     {#if percentRating}
-      <svelte:component this={icon} {size} fillPercent={percentRating} id={partialId} />
+      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={percentRating} id={partialId} />
     {/if}
     {#each Array(grayStars) as star}
-      <svelte:component this={icon} {size} fillPercent={0} id={grayStarId} />
+      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={0} id={grayStarId} />
     {/each}
     {#if $$slots.text}
       <slot name="text" />
@@ -41,11 +43,13 @@ let grayStars = total - (fullStars + Math.ceil(rateDiffence));
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'flex items-center';
-@prop export let size: number = 24;
-@prop export let total: number = 5;
-@prop export let rating: number = 4;
-@prop export let partialId: string = 'partialStar' + generateId();
-@prop export let icon: ComponentType = Star;
-@prop export let count: boolean = false;
+@prop export let divClass: $$Props['divClass'] = 'flex items-center';
+@prop export let size: $$Props['size'] = 24;
+@prop export let total: NonNullable<$$Props['total']> = 5;
+@prop export let rating: $$Props['rating'] = 4;
+@prop export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
+@prop export let icon: $$Props['icon'] = Star;
+@prop export let count: $$Props['count'] = false;
+@prop export let iconFillColor: $$Props['iconFillColor'];
+@prop export let iconStrokeColor: $$Props['iconStrokeColor'];
 -->

package/dist/rating/Rating.svelte.d.ts

@@ -1,15 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ComponentType } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        divClass?: string | undefined;
-        size?: number | undefined;
-        total?: number | undefined;
-        rating?: number | undefined;
-        partialId?: string | undefined;
-        icon?: ComponentType | undefined;
-        count?: boolean | undefined;
+    props: HTMLAttributes<HTMLDivElement> & {
+        divClass?: string;
+        size?: number;
+        total?: number;
+        rating: number;
+        partialId?: string;
+        icon?: ComponentType;
+        count?: boolean;
+        iconFillColor?: string;
+        iconStrokeColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,13 +27,15 @@ export type RatingSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'flex items-center';
- * @prop export let size: number = 24;
- * @prop export let total: number = 5;
- * @prop export let rating: number = 4;
- * @prop export let partialId: string = 'partialStar' + generateId();
- * @prop export let icon: ComponentType = Star;
- * @prop export let count: boolean = false;
+ * @prop export let divClass: $$Props['divClass'] = 'flex items-center';
+ * @prop export let size: $$Props['size'] = 24;
+ * @prop export let total: NonNullable<$$Props['total']> = 5;
+ * @prop export let rating: $$Props['rating'] = 4;
+ * @prop export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
+ * @prop export let icon: $$Props['icon'] = Star;
+ * @prop export let count: $$Props['count'] = false;
+ * @prop export let iconFillColor: $$Props['iconFillColor'];
+ * @prop export let iconStrokeColor: $$Props['iconStrokeColor'];
  */
 export default class Rating extends SvelteComponentTyped<RatingProps, RatingEvents, RatingSlots> {
 }

package/dist/table/Table.svelte

@@ -1,4 +1,5 @@
-<script>import { twMerge, twJoin } from "tailwind-merge";
+<script generics="T">import { writable } from "svelte/store";
+import { twMerge, twJoin } from "tailwind-merge";
 import { setContext } from "svelte";
 export let divClass = "relative overflow-x-auto";
 export let striped = false;
@@ -7,6 +8,17 @@ export let noborder = false;
 export let shadow = false;
 export let color = "default";
 export let customeColor = "";
+export let items = [];
+export let filter = null;
+export let placeholder = "Search";
+export let innerDivClass = "p-4";
+export let searchClass = "relative mt-1";
+export let svgDivClass = "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none";
+export let svgClass = "w-5 h-5 text-gray-500 dark:text-gray-400";
+export let 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";
+let searchTerm = "";
+let inputCls = twMerge(inputClass, $$props.classInput);
+let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
 const colors = {
   default: "text-gray-500 dark:text-gray-400",
   blue: "text-blue-100 dark:text-blue-100",
@@ -22,9 +34,35 @@ $: setContext("striped", striped);
 $: setContext("hoverable", hoverable);
 $: setContext("noborder", noborder);
 $: setContext("color", color);
+$: setContext("items", items);
+const searchTermStore = writable(searchTerm);
+const filterStore = writable(filter);
+setContext("searchTerm", searchTermStore);
+setContext("filter", filterStore);
+$: searchTermStore.set(searchTerm);
+$: filterStore.set(filter);
+setContext("sorter", writable(null));
 </script>
 
 <div class={twJoin(divClass, shadow && 'shadow-md sm:rounded-lg')}>
+  {#if filter}
+    <slot name="search">
+      <div class={innerDivClass}>
+        <label for="table-search" class="sr-only">Search</label>
+        <div class={searchClass}>
+          <div class={svgDivCls}>
+            <slot name="svgSearch">
+              <svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+              </svg>
+            </slot>
+          </div>
+          <input bind:value={searchTerm} type="text" id="table-search" class={inputCls} {placeholder} />
+        </div>
+        <slot name="header" />
+      </div>
+    </slot>
+  {/if}
   <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
     <slot />
   </table>
@@ -41,4 +79,12 @@ $: setContext("color", color);
 @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';
 -->

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { TableColorType } from '../types';
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         [x: string]: any;
         divClass?: string | undefined;
         striped?: boolean | undefined;
@@ -10,17 +10,28 @@ declare const __propDef: {
         shadow?: boolean | undefined;
         color?: TableColorType | undefined;
         customeColor?: string | undefined;
+        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;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
+        search: {};
+        svgSearch: {};
+        header: {};
         default: {};
     };
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
+}
+export type TableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
@@ -31,7 +42,15 @@ export type TableSlots = typeof __propDef.slots;
  * @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';
  */
-export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+export default class Table<T> extends SvelteComponentTyped<TableProps<T>, TableEvents<T>, TableSlots<T>> {
 }
 export {};

package/dist/table/TableBody.svelte

@@ -1,8 +1,18 @@
-<script>export let tableBodyClass = void 0;
+<script generics="T">import { getContext } from "svelte";
+export let tableBodyClass = void 0;
+$: items = getContext("items") || [];
+let filter = getContext("filter");
+let searchTerm = getContext("searchTerm");
+$: filtered = $filter ? items.filter((item) => $filter(item, $searchTerm)) : items;
+let sorter = getContext("sorter");
+$: sorted = $sorter ? filtered.toSorted((a, b) => $sorter.sortDirection * $sorter.sort(a, b)) : filtered;
 </script>
 
 <tbody class={tableBodyClass}>
   <slot />
+  {#each sorted as item}
+    <slot name="row" {item} />
+  {/each}
 </tbody>
 
 <!--

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

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

package/dist/table/TableHeadCell.svelte

@@ -1,14 +1,47 @@
-<script>import { twMerge } from "tailwind-merge";
+<script generics="T">import { getContext } from "svelte";
+import { twMerge } from "tailwind-merge";
 export let padding = "px-6 py-3";
+export let sort = null;
+export let defaultDirection = "asc";
+export let defaultSort = false;
+export let direction = defaultSort ? defaultDirection : null;
+let sorter = getContext("sorter");
+let sortId = Math.random().toString(36).substring(2);
+$: direction = $sorter?.id === sortId ? $sorter.sortDirection === 1 ? "asc" : "desc" : null;
+if (defaultSort) {
+  sortItems();
+}
+function sortItems() {
+  if (!sort || !sorter) return;
+  sorter.update((sorter2) => {
+    return {
+      id: sortId,
+      sort,
+      sortDirection: sorter2?.id === sortId ? -sorter2.sortDirection : defaultDirection === "asc" ? 1 : -1
+    };
+  });
+}
 </script>
 
+{#if sort && sorter}
+<th {...$$restProps} class={$$props.class} on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-sort={direction ? `${direction}ending` : undefined}>
+  <button class={twMerge('w-full text-left', 'after:absolute after:pl-3', direction === 'asc' && 'after:content-["▲"]', direction === 'desc' && 'after:content-["▼"]', padding)} on:click={sortItems}>
+    <slot />
+  </button>
+</th>
+{:else}
 <th {...$$restProps} class={twMerge(padding, $$props.class)} on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
   <slot />
 </th>
+{/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let padding: string = 'px-6 py-3';
+@prop export let sort: ((a: T, b: T) => number) | null = null;
+@prop export let defaultDirection: 'asc' | 'desc' = 'asc';
+@prop export let defaultSort: boolean = false;
+@prop export let direction: 'asc' | 'desc' | null = defaultSort ? defaultDirection : null;
 -->

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

@@ -1,10 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         [x: string]: any;
         padding?: string | undefined;
+        sort?: ((a: T, b: T) => number) | null | undefined;
+        defaultDirection?: ("asc" | "desc") | undefined;
+        defaultSort?: boolean | undefined;
+        direction?: ("asc" | "desc" | null) | undefined;
     };
-    events: {
+    events(): {
         click: MouseEvent;
         focus: FocusEvent;
         keydown: KeyboardEvent;
@@ -16,18 +20,22 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {};
     };
-};
-export type TableHeadCellProps = typeof __propDef.props;
-export type TableHeadCellEvents = typeof __propDef.events;
-export type TableHeadCellSlots = typeof __propDef.slots;
+}
+export type TableHeadCellProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TableHeadCellEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TableHeadCellSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let padding: string = 'px-6 py-3';
+ * @prop export let sort: ((a: T, b: T) => number) | null = null;
+ * @prop export let defaultDirection: 'asc' | 'desc' = 'asc';
+ * @prop export let defaultSort: boolean = false;
+ * @prop export let direction: 'asc' | 'desc' | null = defaultSort ? defaultDirection : null;
  */
-export default class TableHeadCell extends SvelteComponentTyped<TableHeadCellProps, TableHeadCellEvents, TableHeadCellSlots> {
+export default class TableHeadCell<T> extends SvelteComponentTyped<TableHeadCellProps<T>, TableHeadCellEvents<T>, TableHeadCellSlots<T>> {
 }
 export {};

package/dist/timeline/GroupItem.svelte

@@ -5,6 +5,7 @@ export let imgClass = "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0";
 export let divClass = "text-gray-600 dark:text-gray-400";
 export let titleClass = "text-base font-normal";
 export let spanClass = "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400";
+export let isPrivacy = true;
 let aCls = twMerge(aClass, $$props.classA);
 let imgCls = twMerge(imgClass, $$props.classImg);
 let divCls = twMerge(divClass, $$props.classDiv);
@@ -23,6 +24,7 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
+        {#if isPrivacy}
         <span class={spanCls}>
           {#if isPrivate}
             <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -37,6 +39,7 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
             Public
           {/if}
         </span>
+        {/if}
       </div>
     </a>
   </li>
@@ -52,4 +55,5 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
 @prop export let divClass: string = 'text-gray-600 dark:text-gray-400';
 @prop export let titleClass: string = 'text-base font-normal';
 @prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
+@prop export let isPrivacy: boolean = true;
 -->

package/dist/timeline/GroupItem.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         divClass?: string | undefined;
         titleClass?: string | undefined;
         spanClass?: string | undefined;
+        isPrivacy?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -27,6 +28,7 @@ export type GroupItemSlots = typeof __propDef.slots;
  * @prop export let divClass: string = 'text-gray-600 dark:text-gray-400';
  * @prop export let titleClass: string = 'text-base font-normal';
  * @prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
+ * @prop export let isPrivacy: boolean = true;
  */
 export default class GroupItem extends SvelteComponentTyped<GroupItemProps, GroupItemEvents, GroupItemSlots> {
 }

package/dist/utils/Popper.svelte

@@ -14,6 +14,8 @@ export let open = false;
 export let yOnly = false;
 export let middlewares = [dom.flip(), dom.shift()];
 const dispatch = createEventDispatcher();
+let focusable;
+$: focusable = trigger === "focus";
 let clickable;
 $: clickable = trigger === "click";
 let hoverable;
@@ -25,29 +27,28 @@ let floatingEl;
 let arrowEl;
 let contentEl;
 let triggerEls = [];
-let _blocked = false;
-const block = () => (_blocked = true, setTimeout(() => _blocked = false, 250));
 const showHandler = (ev) => {
   if (referenceEl === void 0) console.error("trigger undefined");
   if (!reference && triggerEls.includes(ev.target) && referenceEl !== ev.target) {
     referenceEl = ev.target;
-    block();
+    if (open) return;
   }
-  if (clickable && ev.type === "focusin" && !open) block();
-  open = clickable && ev.type === "click" && !_blocked ? !open : true;
+  open = ev.type === "click" ? !open : true;
 };
 const hasHover = (el) => el.matches(":hover");
 const hasFocus = (el) => el.contains(document.activeElement);
-const px = (n) => n != null ? `${n}px` : "";
+const px = (n) => n ? `${n}px` : "";
 const hideHandler = (ev) => {
-  if (activeContent) {
+  if (activeContent && hoverable) {
+    const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
     setTimeout(() => {
-      const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
-      if (ev.type === "mouseleave" && elements.some(hasHover)) return;
-      if (ev.type === "focusout" && elements.some(hasFocus)) return;
-      open = false;
+      if (ev.type === "mouseleave" && !elements.some(hasHover)) {
+        open = false;
+      }
     }, 100);
-  } else open = false;
+  } else {
+    open = false;
+  }
 };
 let arrowSide;
 const oppositeSideMap = {
@@ -85,8 +86,8 @@ function init(node, _referenceEl) {
 }
 onMount(() => {
   const events = [
-    ["focusin", showHandler, true],
-    ["focusout", hideHandler, true],
+    ["focusin", showHandler, focusable],
+    ["focusout", hideHandler, focusable],
     ["click", showHandler, clickable],
     ["mouseenter", showHandler, hoverable],
     ["mouseleave", hideHandler, hoverable]
@@ -105,13 +106,13 @@ onMount(() => {
     if (referenceEl === document.body) {
       console.error(`Popup reference not found: '${reference}'`);
     } else {
-      referenceEl.addEventListener("focusout", hideHandler);
+      if (focusable) referenceEl.addEventListener("focusout", hideHandler);
       if (hoverable) referenceEl.addEventListener("mouseleave", hideHandler);
     }
   } else {
     referenceEl = triggerEls[0];
   }
-  document.addEventListener("click", closeOnClickOutside);
+  if (clickable) document.addEventListener("click", closeOnClickOutside);
   return () => {
     triggerEls.forEach((element) => {
       if (element) {
@@ -152,7 +153,7 @@ function initArrow(node) {
 {/if}
 
 {#if referenceEl}
-  <Frame use={init} options={referenceEl} bind:open role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent, showHandler)} on:focusout={optional(activeContent, hideHandler)} on:mouseenter={optional(activeContent && hoverable, showHandler)} on:mouseleave={optional(activeContent && hoverable, hideHandler)} {...$$restProps}>
+  <Frame use={init} options={referenceEl} bind:open role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent && focusable, showHandler)} on:focusout={optional(activeContent && focusable, hideHandler)} on:mouseenter={optional(activeContent && hoverable, showHandler)} on:mouseleave={optional(activeContent && hoverable, hideHandler)} {...$$restProps}>
     <slot></slot>
     {#if arrow}<div use:initArrow class={arrowClass}></div>{/if}
   </Frame>

package/package.json

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