flowbite-svelte 0.13.8 → 0.14.1

package/carousels/Indicator.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         name?: string;
         selected?: boolean;
+        indicatorClass?: string;
     };
     events: {
         click: MouseEvent;

package/carousels/Slide.svelte

@@ -1,8 +1,9 @@
 <script >export let image = '';
 export let altTag = '';
 export let attr = '';
+export let slideClass = '';
 </script>
 
-<div class="duration-700 ease-in-out">
+<div class={slideClass}>
   <img src={image} alt={altTag} title={attr} />
 </div>

package/carousels/Slide.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         image?: string;
         altTag?: string;
         attr?: string;
+        slideClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dropdowns/DropdownDefault.svelte

@@ -17,54 +17,57 @@ else {
 }
 let buttonClass;
 let round = rounded ? 'rounded-full' : 'rounded-lg';
-let toggleHidden = true;
+let dropdownToggleHidden = true;
 const handleToggle = () => {
     console.log('toggle clicked.');
-    toggleHidden = !toggleHidden;
+    dropdownToggleHidden = !dropdownToggleHidden;
 };
 export let items;
+export let dropdownClass = 'hidden absolute -left-44 top-12 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700';
+export let headerClass = 'py-3 px-4 text-gray-900 dark:text-white';
+export let linkClass = 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white';
 if (color === 'blue') {
-    buttonClass = `inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
+    buttonClass = `inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
 }
 else if (color === 'blue-outline') {
-    buttonClass = `inline-flex items-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
+    buttonClass = `inline-flex items-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
 }
 else if (color === 'dark') {
-    buttonClass = buttonClass = `inline-flex items-center text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
+    buttonClass = buttonClass = `inline-flex items-center text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
 }
 else if (color === 'dark-outline') {
-    buttonClass = `inline-flex items-center text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
+    buttonClass = `inline-flex items-center text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
 }
 else if (color === 'light') {
-    buttonClass = `inline-flex items-center text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
+    buttonClass = `inline-flex items-center text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
 }
 else if (color === 'green') {
-    buttonClass = `inline-flex items-center text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
+    buttonClass = `inline-flex items-center text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
 }
 else if (color === 'green-outline') {
-    buttonClass = `inline-flex items-center text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
+    buttonClass = `inline-flex items-center text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
 }
 else if (color === 'red') {
-    buttonClass = `inline-flex items-center text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
+    buttonClass = `inline-flex items-center text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
 }
 else if (color === 'red-outline') {
-    buttonClass = `inline-flex items-center text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
+    buttonClass = `inline-flex items-center text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
 }
 else if (color === 'yellow') {
-    buttonClass = `inline-flex items-center text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:focus:ring-yellow-900`;
+    buttonClass = `inline-flex items-center text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center dark:focus:ring-yellow-900`;
 }
 else if (color === 'yellow-outline') {
-    buttonClass = `inline-flex items-center text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
+    buttonClass = `inline-flex items-center text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
 }
 else if (color === 'purple') {
     buttonClass = `inline-flex items-center text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium ${round} ${textSize} ${paddings} text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
 }
 else if (color === 'purple-outline') {
-    buttonClass = `inline-flex items-center text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
+    buttonClass = `inline-flex items-center text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
 }
 else {
     // blue
-    buttonClass = `inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
+    buttonClass = `inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
 }
 </script>
 
@@ -73,17 +76,19 @@ else {
 	<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg>
 </button>
 
-<div class:hidden={toggleHidden} class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700">
-	{#if $$slots.header}
-		<div class="py-3 px-4 text-gray-900 dark:text-white">
-			<slot name="header" />
-		</div>
-	{/if}
-	<ul class="py-1" aria-labelledby="dropdownButton">
-		{#each items as { href, name, divider }}
-			<li class:border-b={divider} class:border-gray-100={divider} class:dark:border-gray-500={divider}>
-				<a {href} class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">{name}</a>
-			</li>
-		{/each}
-	</ul>
+<div class="relative">
+	<div class:hidden={dropdownToggleHidden} class={dropdownClass}>
+		{#if $$slots.header}
+			<div class={headerClass}>
+				<slot name="header" />
+			</div>
+		{/if}
+		<ul class="py-1" aria-labelledby="dropdownButton">
+			{#each items as { href, name, divider }}
+				<li class:border-b={divider} class:border-gray-100={divider} class:dark:border-gray-500={divider}>
+					<a {href} class={linkClass}>{name}</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
 </div>

package/dropdowns/DropdownDefault.svelte.d.ts

@@ -7,6 +7,9 @@ declare const __propDef: {
         textSize?: string;
         color?: DropdownColorType;
         items: DropdownType[];
+        dropdownClass?: string;
+        headerClass?: string;
+        linkClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dropdowns/ImgDropdown.svelte

@@ -0,0 +1,31 @@
+<script >let imgDropdownToggle = true;
+const handleToggle = () => {
+    console.log('toggle clicked.');
+    imgDropdownToggle = !imgDropdownToggle;
+};
+export let items;
+export let divClass = 'relative';
+export let dropdownClass = 'hidden absolute -left-16 top-14 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700';
+export let headerClass = 'py-3 px-4 text-gray-900 dark:text-white';
+export let linkClass = 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white';
+</script>
+
+<div class={divClass}>
+	<div on:click={handleToggle}>
+		<slot />
+	</div>
+	<div class:hidden={imgDropdownToggle} class={dropdownClass}>
+		{#if $$slots.header}
+			<div class={headerClass}>
+				<slot name="header" />
+			</div>
+		{/if}
+		<ul class="py-1" aria-labelledby="dropdownButton">
+			{#each items as { href, name, divider }}
+				<li class:border-b={divider} class:border-gray-100={divider} class:dark:border-gray-500={divider}>
+					<a {href} class={linkClass}>{name}</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</div>

package/dropdowns/ImgDropdown.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { DropdownType } from '../types';
+declare const __propDef: {
+    props: {
+        items: DropdownType[];
+        divClass?: string;
+        dropdownClass?: string;
+        headerClass?: string;
+        linkClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        header: {};
+    };
+};
+export declare type ImgDropdownProps = typeof __propDef.props;
+export declare type ImgDropdownEvents = typeof __propDef.events;
+export declare type ImgDropdownSlots = typeof __propDef.slots;
+export default class ImgDropdown extends SvelteComponentTyped<ImgDropdownProps, ImgDropdownEvents, ImgDropdownSlots> {
+}
+export {};

package/footer/SitemapFooter.svelte

@@ -5,6 +5,7 @@ export let footerClass = 'bg-white dark:bg-gray-800';
 export let linksClass = 'grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4';
 export let parentClass = 'mb-6 text-sm font-semibold dark:text-gray-400 uppercase';
 export let ulClass = 'text-gray-900 dark:text-gray-300';
+export let liClass = 'mb-4';
 export let linkClass = 'hover:underline';
 export let copyrightDivClass = 'py-6 px-4 text-gray-900 dark:bg-gray-700 md:flex md:items-center md:justify-between';
 export let copyrightClass = 'text-sm text-gray-900 dark:text-gray-300 sm:text-center';
@@ -16,30 +17,32 @@ export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
 <footer class="{footerClass} {$$props.class}">
-  <div class={linksClass}>
-    {#each links as { parent, children }}
-      <div>
-        <h2 class={parentClass}>
-          {parent}
-        </h2>
-        <ul class={ulClass}>
-          {#each children as { name, href }}
-            <li class="mb-4">
-              <a {href} class={linkClass}>{name}</a>
-            </li>
-          {/each}
-        </ul>
-      </div>
-    {/each}
-  </div>
-  <div class={copyrightDivClass}>
-    <span class={copyrightClass}>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved} </span>
-    <div class={socialMediaDivClass}>
-      {#each socialMedia as { href, icon }}
-        <a {href} class={socialMediaLinkClass}>
-          <svelte:component this={icon} className={iconClass} />
-        </a>
-      {/each}
-    </div>
-  </div>
+	<div class={linksClass}>
+		{#each links as { parent, children }}
+			<div>
+				<h2 class={parentClass}>
+					{parent}
+				</h2>
+				<ul class={ulClass}>
+					{#each children as { name, href }}
+						<li class={liClass}>
+							<a {href} class={linkClass}>{name}</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/each}
+	</div>
+	<div class={copyrightDivClass}>
+		<span class={copyrightClass}
+			>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved}
+		</span>
+		<div class={socialMediaDivClass}>
+			{#each socialMedia as { href, icon }}
+				<a {href} class={socialMediaLinkClass}>
+					<svelte:component this={icon} className={iconClass} />
+				</a>
+			{/each}
+		</div>
+	</div>
 </footer>

package/footer/SitemapFooter.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         linksClass?: string;
         parentClass?: string;
         ulClass?: string;
+        liClass?: string;
         linkClass?: string;
         copyrightDivClass?: string;
         copyrightClass?: string;

package/footer/SocialMediaFooter.svelte

@@ -10,6 +10,7 @@ export let imgClass = 'mr-3 h-8';
 export let linksDivClass = 'grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3';
 export let parentClass = 'mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white';
 export let ulClass = 'text-gray-600 dark:text-gray-400';
+export let liClass = 'mb-4';
 export let linkClass = 'hover:underline';
 export let hrClass = 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8';
 export let copyrightDivClass = 'sm:flex sm:items-center sm:justify-between';
@@ -37,7 +38,7 @@ export let allRightsReserved = 'All Rights Reserved.';
 					</h2>
 					<ul class={ulClass}>
 						{#each children as { name, href }}
-							<li class="mb-4">
+							<li class={liClass}>
 								<a {href} class={linkClass}>{name}</a>
 							</li>
 						{/each}

package/footer/SocialMediaFooter.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         linksDivClass?: string;
         parentClass?: string;
         ulClass?: string;
+        liClass?: string;
         linkClass?: string;
         hrClass?: string;
         copyrightDivClass?: string;

package/forms/Input.svelte

@@ -7,12 +7,23 @@ export let label = '';
 export let required = false;
 export let placeholder = '';
 export let size = 'text-sm';
-export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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 padding = '';
+if (size === 'sm:text-md') {
+    padding = 'p-4';
+}
+else if (size === 'text-sm') {
+    padding = 'p-2.5';
+}
+else {
+    padding = 'p-2';
+}
+export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ${padding} 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 let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
 export let disabled = false;
 export let readonly = false;
 export let helper = '';
 export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
+export let ref = null;
 // you need to this to avoid 2-way binding
 function setType(node) {
     node.type = type;
@@ -21,7 +32,18 @@ function setType(node) {
 
 <div class={$$props.class}>
 	<label for={id} class={labelClass}>{label}</label>
-	<input bind:value {name} use:setType {id} class={inputClass} {placeholder} {required} {disabled} {readonly} />
+	<input
+		bind:value
+		bind:this={ref}
+		{name}
+		use:setType
+		{id}
+		class={inputClass}
+		{placeholder}
+		{required}
+		{disabled}
+		{readonly}
+	/>
 	{#if helper}
 		<p class={helperClass}>{@html helper}</p>
 	{/if}

package/forms/Input.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         readonly?: boolean;
         helper?: string;
         helperClass?: string;
+        ref?: HTMLElement;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Textarea.svelte

@@ -4,6 +4,7 @@ export let id = generateId();
 export let name = 'message';
 export let label = 'Your message';
 export let rows = 4;
+export let ref = null;
 export let placeholder = 'Leave a comment...';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400';
 export let textareaClass = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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';
@@ -12,7 +13,7 @@ export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 </script>
 
 <label for={id} class={labelClass}>{label}</label>
-<textarea bind:value {id} {name} {rows} class={textareaClass} {placeholder} />
+<textarea bind:value bind:this={ref} {id} {name} {rows} class={textareaClass} {placeholder} />
 {#if helper}
 	<p class={helperClass}>{@html helper}</p>
 {/if}

package/forms/Textarea.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         name?: string;
         label?: string;
         rows?: number;
+        ref?: HTMLElement;
         placeholder?: string;
         labelClass?: string;
         textareaClass?: string;

package/index.d.ts

@@ -12,6 +12,7 @@ export { default as Avatar } from "./avatar/Avatar.svelte";
 export { default as Badge } from "./badges/Badge.svelte";
 export { default as BadgeIcon } from "./badges/BadgeIcon.svelte";
 export { default as BadgeLink } from "./badges/BadgeLink.svelte";
+export { default as Breadcrumb } from "./breadcrumbs/Breadcrumb.svelte";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ColorShadowButton } from "./buttons/ColorShadowButton.svelte";
 export { default as GradientDuotoneButton } from "./buttons/GradientDuotoneButton.svelte";
@@ -27,8 +28,10 @@ export { default as CtaCard } from "./cards/CtaCard.svelte";
 export { default as EcommerceCard } from "./cards/EcommerceCard.svelte";
 export { default as SignInCard } from "./cards/SignInCard.svelte";
 export { default as Carousel } from "./carousels/Carousel.svelte";
+export { default as CarouselTransition } from "./carousels/CarouselTransition.svelte";
 export { default as DarkMode } from "./darkmode/DarkMode.svelte";
 export { default as Dropdown } from "./dropdowns/DropdownDefault.svelte";
+export { default as ImgDropdown } from "./dropdowns/ImgDropdown.svelte";
 export { default as SimpleFooter } from "./footer/SimpleFooter.svelte";
 export { default as LogoFooter } from "./footer/LogoFooter.svelte";
 export { default as SocialMediaFooter } from "./footer/SocialMediaFooter.svelte";

package/index.js

@@ -20,7 +20,10 @@ export { default as Avatar } from './avatar/Avatar.svelte'
 // Badges
 export { default as Badge } from'./badges/Badge.svelte'
 export { default as BadgeIcon } from'./badges/BadgeIcon.svelte'
-export { default as BadgeLink } from'./badges/BadgeLink.svelte'
+export { default as BadgeLink } from './badges/BadgeLink.svelte'
+
+// Breadcrumbs
+export { default as Breadcrumb } from'./breadcrumbs/Breadcrumb.svelte'
 
 // Buttons
 export { default as Button } from'./buttons/Button.svelte'
@@ -44,12 +47,14 @@ export { default as SignInCard } from'./cards/SignInCard.svelte'
 
 // Carousels
 export { default as Carousel } from './carousels/Carousel.svelte'
+export { default as CarouselTransition } from './carousels/CarouselTransition.svelte'
 
 // Dark mode
 export { default as DarkMode } from'./darkmode/DarkMode.svelte'
 
 // Dropdown
-export { default as Dropdown } from'./dropdowns/DropdownDefault.svelte' 
+export { default as Dropdown } from './dropdowns/DropdownDefault.svelte' 
+export { default as ImgDropdown } from './dropdowns/ImgDropdown.svelte'
 
 // Footers
 export { default as SimpleFooter } from'./footer/SimpleFooter.svelte'

package/navbar/Navbar.svelte

@@ -22,32 +22,58 @@ export let liLinkClass = `block py-2 pr-4 pl-3  text-gray-700 border-b border-gr
 </script>
 
 <nav class={navClass}>
-  <div class={navDivClass}>
-    <a href="/" class="flex">
-      <img src={logo} {alt} />
-      <span class={spanClass}>{siteName}</span>
-    </a>
-    <button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
-      <span class="sr-only">Open main menu</span>
-      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
-      <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-    </button>
-    <div class:hidden={barHidden} class="hidden w-full md:block md:w-auto" id="mobile-menu">
-      <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-        {#each menus as { name, href, rel }}
-          <li>
-            <a class:active={pathname === href} {href} {rel} class={liLinkClass}>{name}</a>
-          </li>
-        {/each}
-      </ul>
-      {#if user}
-        <slot name="user" />
-      {/if}
-    </div>
-  </div>
+	<div class={navDivClass}>
+		<a href="/" class="flex">
+			<img src={logo} {alt} />
+			<span class={spanClass}>{siteName}</span>
+		</a>
+		<button
+			on:click={handleClickbtn}
+			type="button"
+			class={buttonClass}
+			aria-controls="mobile-menu-2"
+			aria-expanded="false"
+		>
+			<span class="sr-only">Open main menu</span>
+			<svg
+				class="w-6 h-6"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+					clip-rule="evenodd"
+				/></svg
+			>
+			<svg
+				class="hidden w-6 h-6"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/></svg
+			>
+		</button>
+		<div class:hidden={barHidden} class="hidden w-full md:block md:w-auto" id="mobile-menu">
+			<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
+				{#each menus as { name, href, rel }}
+					<li>
+						<a class:active={pathname === href} {href} {rel} class={liLinkClass}>{name}</a>
+					</li>
+				{/each}
+			</ul>
+			{#if user}
+				<slot name="user" />
+			{/if}
+		</div>
+	</div>
 </nav>
 
 <style>
-  #mobile-menu .active {
-    color: #fab534;
-  }</style>
+	#mobile-menu .active {
+		color: #fab534;
+	}</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.13.8",
+  "version": "0.14.1",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -12,29 +12,33 @@
   "homepage": "https://github.com/shinokada/flowbite-svelte",
   "license": "MIT",
   "devDependencies": {
-    "@codewithshin/svelte-sidebar": "^0.4.7",
+    "@codewithshin/svelte-heroicons": "^1.1.3",
+    "@codewithshin/svelte-sidebar": "^0.4.8",
     "@codewithshin/svelte-simpleicons": "^0.2.2",
-    "@codewithshin/svelte-utterances": "^0.1.2",
-    "@playwright/test": "^1.19.1",
+    "@codewithshin/svelte-utterances": "^0.2.2",
+    "@playwright/test": "^1.21.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.4",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
+    "flowbite": "^1.4.1",
+    "flowbite-svelte": "^0.13.8",
     "mdsvex": "^0.10.5",
-    "postcss": "^8.4.5",
-    "postcss-load-config": "^3.1.1",
+    "postcss": "^8.4.12",
+    "postcss-load-config": "^3.1.4",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
     "prism-themes": "^1.9.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.10.1",
-    "svelte2tsx": "^0.5.5",
-    "tailwindcss": "^3.0.12",
+    "svelte-collapse": "^0.0.4",
+    "svelte-preprocess": "^4.10.5",
+    "svelte2tsx": "^0.5.9",
+    "tailwindcss": "^3.0.23",
     "tslib": "^2.3.1",
     "typescript": "~4.6.2"
   },
@@ -72,13 +76,9 @@
     "type": "git",
     "url": "https://github.com/shinokada/flowbite-svelte"
   },
-  "dependencies": {
-    "@codewithshin/svelte-heroicons": "^1.1.3",
-    "flowbite": "^1.3.4",
-    "svelte-collapse": "^0.0.4"
-  },
   "exports": {
     "./package.json": "./package.json",
+    "./.DS_Store": "./.DS_Store",
     "./accordions/AccordionDefault.svelte": "./accordions/AccordionDefault.svelte",
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
@@ -94,6 +94,7 @@
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
     "./badges/BadgeLink.svelte": "./badges/BadgeLink.svelte",
+    "./breadcrumbs/Breadcrumb.svelte": "./breadcrumbs/Breadcrumb.svelte",
     "./buttongroups/ButtonGroup.svelte": "./buttongroups/ButtonGroup.svelte",
     "./buttongroups/ButtonGroupOutline.svelte": "./buttongroups/ButtonGroupOutline.svelte",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
@@ -110,11 +111,13 @@
     "./cards/SignInCard.svelte": "./cards/SignInCard.svelte",
     "./carousels/Caption.svelte": "./carousels/Caption.svelte",
     "./carousels/Carousel.svelte": "./carousels/Carousel.svelte",
+    "./carousels/CarouselTransition.svelte": "./carousels/CarouselTransition.svelte",
     "./carousels/Indicator.svelte": "./carousels/Indicator.svelte",
     "./carousels/Slide.svelte": "./carousels/Slide.svelte",
     "./carousels/Thumbnail.svelte": "./carousels/Thumbnail.svelte",
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
     "./dropdowns/DropdownDefault.svelte": "./dropdowns/DropdownDefault.svelte",
+    "./dropdowns/ImgDropdown.svelte": "./dropdowns/ImgDropdown.svelte",
     "./footer/LogoFooter.svelte": "./footer/LogoFooter.svelte",
     "./footer/SimpleFooter.svelte": "./footer/SimpleFooter.svelte",
     "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",

package/paginations/TableData.svelte

@@ -21,7 +21,7 @@ export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800
 		</span>
 	{/if}
 	<!-- Buttons -->
-	<div class="inline-flex mt-2 xs:mt-0">
+	<div class="inline-flex mt-2">
 		<button on:click={previous} class={btnPreClass}> Prev </button>
 		<button on:click={next} class={btnNextClass}> Next </button>
 	</div>

package/tables/TableSearch.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         inputValue?: string;
         menuItems: Array<Array<string>>;
-        filteredItems?: any[];
+        filteredItems?: Array<Array<string>>;
         placeholder?: string;
         header: Array<string>;
         divClass?: string;