flowbite-svelte 0.13.7 → 0.14.0

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.13.10](https://github.com/shinokada/flowbite-svelte/compare/v0.13.9...v0.13.10) (2022-04-16)
+
+
+### Bug Fixes
+
+* add a space in front of from /index ([32beb0e](https://github.com/shinokada/flowbite-svelte/commit/32beb0e9d3fd7c9c92e34ccc8d690a9f8361c780))
+* add Breadcrumb to md files ([6ea1d24](https://github.com/shinokada/flowbite-svelte/commit/6ea1d246ef2ed47f87ec764634fad6729700d286))
+* add btnLabel=Read more ([0730167](https://github.com/shinokada/flowbite-svelte/commit/073016733d50fddc70e78e38520eabf0a912236c))
+* update h1 for breadcrumb ([8bfef6a](https://github.com/shinokada/flowbite-svelte/commit/8bfef6a93f69dbbf4fb667ba0d177059181b6cdb))
+* update h1 in index pages ([e4d1a52](https://github.com/shinokada/flowbite-svelte/commit/e4d1a5284c5ce5f1d981e377263f97c2a2d00485))
+* update layouts for breadcrumb ([1c07955](https://github.com/shinokada/flowbite-svelte/commit/1c07955215fe7a48e3e5573c5c657d59978b5fe4))
+
+### [0.13.9](https://github.com/shinokada/flowbite-svelte/compare/v0.13.8...v0.13.9) (2022-04-16)
+
+
+### Features
+
+* add focus on load to Input component ([5d0c7fb](https://github.com/shinokada/flowbite-svelte/commit/5d0c7fb7750aac2dc0df2ddd24a7c11cd66404c6))
+
+
+### Bug Fixes
+
+* add 100% to pre tag ([3c8eaf2](https://github.com/shinokada/flowbite-svelte/commit/3c8eaf257697c48121cc79496885e05309b302bc))
+* Input padding uses p-4, p-2.5 and p-2 depends on the size ([632bd5d](https://github.com/shinokada/flowbite-svelte/commit/632bd5d550b0268a93eec91598b35a854a45c081))
+* logo ([c28e9f3](https://github.com/shinokada/flowbite-svelte/commit/c28e9f3683140e1bb12f4667e26e5d7805d4ddb9))
+* moved p-tag and h3 tag css to app.css ([cb3d08e](https://github.com/shinokada/flowbite-svelte/commit/cb3d08edb98d96cadad9975e20488af55f4fa344))
+* refresh dev environment ([3a1b452](https://github.com/shinokada/flowbite-svelte/commit/3a1b452f925e14b2d159456c8f1f50b2972ae52b))
+* update carousel page ([27c621b](https://github.com/shinokada/flowbite-svelte/commit/27c621b5f7a97896635ddbc2aa9cccf624275e80))
+* update main nav. add transition to carousel ([3a9f572](https://github.com/shinokada/flowbite-svelte/commit/3a9f5723af8f54ef58c6902af5599114cc81fb86))
+
+### [0.13.8](https://github.com/shinokada/flowbite-svelte/compare/v0.13.7...v0.13.8) (2022-04-14)
+
+
+### Features
+
+* add carousel components ([846a99d](https://github.com/shinokada/flowbite-svelte/commit/846a99dde2f45246493fac99790c220da257eefd))
+
 ### [0.13.7](https://github.com/shinokada/flowbite-svelte/compare/v0.13.6...v0.13.7) (2022-04-13)
 
 

package/README.md

@@ -57,6 +57,10 @@
 - [List Card](https://flowbite-svelte.vercel.app/cards/list)
 - [Signin Card](https://flowbite-svelte.vercel.app/cards/signin)
 
+## Carousel components
+
+- [Carousel](https://flowbite-svelte.vercel.app/carousels)
+
 ## Dark mode components
 
 - [Dark mode](https://flowbite-svelte.vercel.app/darkmode)

package/breadcrumbs/Breadcrumb.svelte

@@ -0,0 +1,49 @@
+<script >export let crumbs = [];
+export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+export let crumbClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
+export let solid = false;
+let navClass = 'flex';
+if (solid) {
+    navClass =
+        'flex py-3 px-5 text-gray-700 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700';
+}
+</script>
+
+<nav class={navClass} aria-label="Breadcrumb">
+	<ol class="inline-flex items-center space-x-1 md:space-x-3">
+		{#each crumbs as crumb}
+			{#if crumb.href === '/'}
+				<li class="inline-flex items-center">
+					<a href={crumb.href} class={homeClass}>
+						<svg
+							class="mr-2 w-4 h-4"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+							xmlns="http://www.w3.org/2000/svg"
+							><path
+								d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+							/></svg
+						>
+						{crumb.label}</a
+					>
+				</li>
+			{:else}
+				<li>
+					<div class="flex items-center">
+						<svg
+							class="w-6 h-6 text-gray-400"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+							xmlns="http://www.w3.org/2000/svg"
+							><path
+								fill-rule="evenodd"
+								d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+								clip-rule="evenodd"
+							/></svg
+						><a href={crumb.href} class={crumbClass}>{crumb.label}</a>
+					</div>
+				</li>
+			{/if}
+		{/each}
+	</ol>
+</nav>

package/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        crumbs?: {
+            label: string;
+            href: string;
+        }[];
+        homeClass?: string;
+        crumbClass?: string;
+        solid?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BreadcrumbProps = typeof __propDef.props;
+export declare type BreadcrumbEvents = typeof __propDef.events;
+export declare type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};

package/cards/Card.svelte

@@ -2,40 +2,48 @@
 export let rel = '';
 export let alt = '';
 export let img = '';
-export let btnLabel = 'Read more';
+export let btnLabel = '';
 export let btnColor = 'blue';
 export let textdivClass = 'p-5';
-export let paragraphClass = 'mb-3 font-normal text-gray-700 dark:text-gray-400';
 export let headerClass = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
-export let header = 'Lorem ipsum';
+export let header = '';
 export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
 let buttonClass;
 if (btnColor === 'blue') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 else if (btnColor === 'gray') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 }
 else if (btnColor === 'red') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
 }
 else if (btnColor === 'yellow') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
 }
 else if (btnColor === 'green') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
 }
 else if (btnColor === 'indigo') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
 }
 else if (btnColor === 'purple') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
 }
 else if (btnColor === 'pink') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
 }
 else {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 </script>
 
@@ -50,26 +58,36 @@ else {
 		{/if}
 	{/if}
 	<div class={textdivClass}>
-		{#if link}
-			<a href={link} {rel}>
+		{#if header}
+			{#if link}
+				<a href={link} {rel}>
+					<h3 class={headerClass}>
+						{header}
+					</h3>
+				</a>
+			{:else}
 				<h3 class={headerClass}>
 					{header}
 				</h3>
-			</a>
-		{:else}
-			<h3 class={headerClass}>
-				{header}
-			</h3>
+			{/if}
 		{/if}
 		{#if $$slots.paragraph}
-			<p class={paragraphClass}>
-				<slot name="paragraph" />
-			</p>
+			<slot name="paragraph" />
 		{/if}
 		{#if link}
 			<a href={link} {rel} class={buttonClass}>
 				{btnLabel}
-				<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+				<svg
+					class="ml-2 -mr-1 w-4 h-4"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						fill-rule="evenodd"
+						d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/></svg
+				>
 			</a>
 		{/if}
 	</div>

package/cards/Card.svelte.d.ts

@@ -9,7 +9,6 @@ declare const __propDef: {
         btnLabel?: string;
         btnColor?: Colors;
         textdivClass?: string;
-        paragraphClass?: string;
         headerClass?: string;
         header?: string;
         divClass?: string;

package/carousels/Caption.svelte

@@ -0,0 +1,7 @@
+<script >export let caption = '';
+export let captionClass = '';
+</script>
+
+<div class={captionClass}>
+  <p id="caption" class="text-gray-900 dark:text-white">{caption}</p>
+</div>

package/carousels/Caption.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        caption?: string;
+        captionClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CaptionProps = typeof __propDef.props;
+export declare type CaptionEvents = typeof __propDef.events;
+export declare type CaptionSlots = typeof __propDef.slots;
+export default class Caption extends SvelteComponentTyped<CaptionProps, CaptionEvents, CaptionSlots> {
+}
+export {};

package/carousels/Carousel.svelte

@@ -0,0 +1,132 @@
+<script >import Slide from './Slide.svelte';
+import Thumbnail from './Thumbnail.svelte';
+import Caption from './Caption.svelte';
+import Indicator from './Indicator.svelte';
+export let showIndicators = true;
+export let showCaptions = true;
+export let showThumbs = true;
+export let images;
+export let slideControls = true;
+// Carousel
+export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+// Caption
+export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+// Indicator
+export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+// Slide
+export let slideClass = '';
+let imageShowingIndex = 0;
+// $: console.log(imageShowingIndex);
+$: image = images[imageShowingIndex];
+const nextSlide = () => {
+    if (imageShowingIndex === images.length - 1) {
+        imageShowingIndex = 0;
+    }
+    else {
+        imageShowingIndex += 1;
+    }
+};
+const prevSlide = () => {
+    if (imageShowingIndex === 0) {
+        imageShowingIndex = images.length - 1;
+    }
+    else {
+        imageShowingIndex -= 1;
+    }
+};
+const goToSlide = (number) => (imageShowingIndex = number);
+let thumbWidth = 100 / images.length;
+</script>
+
+<div id="default-carousel" class="relative">
+	<div class={divClass}>
+		<Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
+	</div>
+	{#if showIndicators}
+		<!-- Slider indicators -->
+		<div class={indicatorDivClass}>
+			{#each images as { id, imgurl, name, attribution }}
+				<Indicator
+					{name}
+					selected={imageShowingIndex === id}
+					on:click={() => goToSlide(id)}
+					{indicatorClass}
+				/>
+			{/each}
+		</div>
+	{/if}
+	{#if slideControls}
+		<!-- Slider controls -->
+		<button
+			on:click={prevSlide}
+			type="button"
+			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+			data-carousel-prev
+		>
+			<span
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
+			>
+				<svg
+					class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+					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="M15 19l-7-7 7-7"
+					/></svg
+				>
+				<span class="hidden">Previous</span>
+			</span>
+		</button>
+		<button
+			on:click={nextSlide}
+			type="button"
+			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+			data-carousel-next
+		>
+			<span
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
+			>
+				<svg
+					class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+					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="M9 5l7 7-7 7"
+					/></svg
+				>
+				<span class="hidden">Next</span>
+			</span>
+		</button>
+	{/if}
+</div>
+
+{#if showCaptions}
+	<Caption caption={images[imageShowingIndex].name} {captionClass} />
+{/if}
+
+{#if showThumbs}
+	<div class="flex flex-row justify-center bg-gray-100">
+		{#each images as { id, imgurl, name, attribution }}
+			<Thumbnail
+				{thumbWidth}
+				thumbImg={imgurl}
+				altTag={name}
+				titleLink={attribution}
+				{id}
+				selected={imageShowingIndex === id}
+				on:click={() => goToSlide(id)}
+			/>
+		{/each}
+	</div>
+{/if}

package/carousels/Carousel.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        showIndicators?: boolean;
+        showCaptions?: boolean;
+        showThumbs?: boolean;
+        images: any[];
+        slideControls?: boolean;
+        divClass?: string;
+        indicatorDivClass?: string;
+        captionClass?: string;
+        indicatorClass?: string;
+        slideClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CarouselProps = typeof __propDef.props;
+export declare type CarouselEvents = typeof __propDef.events;
+export declare type CarouselSlots = typeof __propDef.slots;
+export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
+}
+export {};

package/carousels/CarouselTransition.svelte

@@ -0,0 +1,155 @@
+<script >import { fade, blur, fly, slide } from 'svelte/transition';
+import Slide from './Slide.svelte';
+import Thumbnail from './Thumbnail.svelte';
+import Caption from './Caption.svelte';
+import Indicator from './Indicator.svelte';
+export let showIndicators = true;
+export let showCaptions = true;
+export let showThumbs = true;
+export let images;
+export let slideControls = true;
+export let transitionType;
+export let transitionParams = {};
+// have a custom transition function that returns the desired transition
+function multiple(node, params) {
+    switch (transitionType) {
+        case 'slide':
+            return slide(node, params);
+        case 'blur':
+            return blur(node, params);
+        case 'fly':
+            return fly(node, params);
+        case 'fade':
+            return fade(node, params);
+    }
+}
+// Carousel
+export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+// Caption
+export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+// Indicator
+export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+// Slide
+// export let slideClass: string = 'hidden';
+let imageShowingIndex = 1;
+// $: console.log(imageShowingIndex);
+// $: image = images[imageShowingIndex];
+const nextSlide = () => {
+    if (imageShowingIndex === images.length - 1) {
+        imageShowingIndex = 0;
+    }
+    else {
+        imageShowingIndex += 1;
+    }
+};
+const prevSlide = () => {
+    if (imageShowingIndex === 0) {
+        imageShowingIndex = images.length - 1;
+    }
+    else {
+        imageShowingIndex -= 1;
+    }
+};
+const goToSlide = (number) => (imageShowingIndex = number);
+let thumbWidth = 100 / images.length;
+</script>
+
+<div id="default-carousel" class="relative">
+	<div class={divClass}>
+		{#each images as { id, imgurl, name, attribution }}
+			{#if imageShowingIndex === id}
+				<div transition:multiple={transitionParams}>
+					<Slide image={imgurl} altTag={name} attr={attribution} />
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	{#if showIndicators}
+		<!-- Slider indicators -->
+		<div class={indicatorDivClass}>
+			{#each images as { id, imgurl, name, attribution }}
+				<Indicator
+					{name}
+					selected={imageShowingIndex === id}
+					on:click={() => goToSlide(id)}
+					{indicatorClass}
+				/>
+			{/each}
+		</div>
+	{/if}
+	{#if slideControls}
+		<!-- Slider controls -->
+		<button
+			on:click={prevSlide}
+			type="button"
+			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+			data-carousel-prev
+		>
+			<span
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
+			>
+				<svg
+					class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+					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="M15 19l-7-7 7-7"
+					/></svg
+				>
+				<span class="hidden">Previous</span>
+			</span>
+		</button>
+		<button
+			on:click={nextSlide}
+			type="button"
+			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+			data-carousel-next
+		>
+			<span
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
+			>
+				<svg
+					class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+					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="M9 5l7 7-7 7"
+					/></svg
+				>
+				<span class="hidden">Next</span>
+			</span>
+		</button>
+	{/if}
+</div>
+
+{#if showCaptions}
+	<Caption caption={images[imageShowingIndex].name} {captionClass} />
+{/if}
+
+{#if showThumbs}
+	<div class="flex flex-row justify-center bg-gray-100">
+		{#each images as { id, imgurl, name, attribution }}
+			<Thumbnail
+				{thumbWidth}
+				thumbImg={imgurl}
+				altTag={name}
+				titleLink={attribution}
+				{id}
+				selected={imageShowingIndex === id}
+				on:click={() => goToSlide(id)}
+			/>
+		{/each}
+	</div>
+{/if}

package/carousels/CarouselTransition.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TransitionTypes, TransitionParamTypes } from '../types';
+declare const __propDef: {
+    props: {
+        showIndicators?: boolean;
+        showCaptions?: boolean;
+        showThumbs?: boolean;
+        images: any[];
+        slideControls?: boolean;
+        transitionType: TransitionTypes;
+        transitionParams?: TransitionParamTypes;
+        divClass?: string;
+        indicatorDivClass?: string;
+        captionClass?: string;
+        indicatorClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CarouselTransitionProps = typeof __propDef.props;
+export declare type CarouselTransitionEvents = typeof __propDef.events;
+export declare type CarouselTransitionSlots = typeof __propDef.slots;
+export default class CarouselTransition extends SvelteComponentTyped<CarouselTransitionProps, CarouselTransitionEvents, CarouselTransitionSlots> {
+}
+export {};

package/carousels/Indicator.svelte

@@ -0,0 +1,11 @@
+<script >export let name = '';
+export let selected = false;
+export let indicatorClass = '';
+</script>
+
+<button type="button" class={indicatorClass} class:active={selected} aria-label={name} on:click />
+
+<style>
+  .active {
+    opacity: 1;
+  }</style>

package/carousels/Indicator.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string;
+        selected?: boolean;
+        indicatorClass?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type IndicatorProps = typeof __propDef.props;
+export declare type IndicatorEvents = typeof __propDef.events;
+export declare type IndicatorSlots = typeof __propDef.slots;
+export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
+}
+export {};

package/carousels/Slide.svelte

@@ -0,0 +1,9 @@
+<script >export let image = '';
+export let altTag = '';
+export let attr = '';
+export let slideClass = '';
+</script>
+
+<div class={slideClass}>
+  <img src={image} alt={altTag} title={attr} />
+</div>

package/carousels/Slide.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        image?: string;
+        altTag?: string;
+        attr?: string;
+        slideClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SlideProps = typeof __propDef.props;
+export declare type SlideEvents = typeof __propDef.events;
+export declare type SlideSlots = typeof __propDef.slots;
+export default class Slide extends SvelteComponentTyped<SlideProps, SlideEvents, SlideSlots> {
+}
+export {};

package/carousels/Thumbnail.svelte

@@ -0,0 +1,14 @@
+<script >export let thumbImg = '';
+export let altTag = '';
+export let titleLink = '';
+export let id;
+export let thumbWidth;
+export let selected = false;
+</script>
+
+<img class="opacity-40" class:active={selected} id={id.toString()} src={thumbImg} alt={altTag} title="Image from {titleLink}" on:click width="{thumbWidth}%" />
+
+<style>
+  .active {
+    opacity: 1;
+  }</style>

package/carousels/Thumbnail.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        thumbImg?: string;
+        altTag?: string;
+        titleLink?: string;
+        id: number;
+        thumbWidth: number;
+        selected?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ThumbnailProps = typeof __propDef.props;
+export declare type ThumbnailEvents = typeof __propDef.events;
+export declare type ThumbnailSlots = typeof __propDef.slots;
+export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
+}
+export {};

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";
@@ -26,6 +27,8 @@ export { default as ListCard } from "./cards/ListCard.svelte";
 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 SimpleFooter } from "./footer/SimpleFooter.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'
@@ -42,6 +45,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'
 
+// 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'
 

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.7",
+  "version": "0.14.0",
   "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",
@@ -108,6 +109,12 @@
     "./cards/InteractiveCard.svelte": "./cards/InteractiveCard.svelte",
     "./cards/ListCard.svelte": "./cards/ListCard.svelte",
     "./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",
     "./footer/LogoFooter.svelte": "./footer/LogoFooter.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;

package/types.d.ts

@@ -121,7 +121,7 @@ export interface AvatarType {
     header?: string;
     text?: string;
 }
-export declare type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur';
+export declare type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';
 export interface TimelineItemType {
     date: Date | string;
     title: string;