flowbite-svelte 0.14.0 → 0.14.3

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.14.3](https://github.com/shinokada/flowbite-svelte/compare/v0.14.2...v0.14.3) (2022-04-18)
+
+
+### Features
+
+* add slot and {...70121restProps} to all button components ([c98057c](https://github.com/shinokada/flowbite-svelte/commit/c98057cd6ee39053660378dad2b0bdb6970e18da))
+
+### [0.14.2](https://github.com/shinokada/flowbite-svelte/compare/v0.14.1...v0.14.2) (2022-04-18)
+
+### [0.14.1](https://github.com/shinokada/flowbite-svelte/compare/v0.13.10...v0.14.1) (2022-04-18)
+
+
+### Features
+
+* add ImgDropdown ([30e9d01](https://github.com/shinokada/flowbite-svelte/commit/30e9d01dcd51559f6771ebaeef57100cf198c452))
+
 ### [0.13.10](https://github.com/shinokada/flowbite-svelte/compare/v0.13.9...v0.13.10) (2022-04-16)
 
 

package/README.md

@@ -31,6 +31,10 @@
 - [Icon badge](https://flowbite-svelte.vercel.app/badges/badge-icon)
 - [Link badge](https://flowbite-svelte.vercel.app/badges/badge-link)
 
+## Breadcrumb components
+
+- [Breadcrumb](https://flowbite-svelte.vercel.app/breadcrumbs)
+
 ## Button group compnents
 
 - [Default button group](https://flowbite-svelte.vercel.app/button-groups/default)
@@ -67,7 +71,8 @@
 
 ## Dropdown components
 
-- [Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
+- [Dropdown](https://flowbite-svelte.vercel.app/dropdowns/default)
+- [Dropdown with Image](https://flowbite-svelte.vercel.app/dropdowns/image)
 
 ## Form components
 
@@ -154,4 +159,13 @@ Run:
 
 ```sh
 npm run test
-```
+```
+
+## Create props
+
+```sh
+cd scripts
+node createProps.js
+```
+
+This will pull all props from components and replace files in `/src/routes/props` directory.

package/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import type { CrumbType } from '../types';
 declare const __propDef: {
     props: {
-        crumbs?: {
-            label: string;
-            href: string;
-        }[];
+        crumbs?: CrumbType[];
         homeClass?: string;
         crumbClass?: string;
         solid?: boolean;

package/buttons/Button.svelte

@@ -63,7 +63,7 @@ else {
 }
 </script>
 
-<button type={btnType} class={buttonClass} on:click>
+<button type={btnType} class={buttonClass} on:click {...$$restProps}>
 	{name}
 	<slot />
 </button>

package/buttons/Button.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Buttontypes, ButtonType, Textsize } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         rounded?: boolean;
         textSize?: Textsize;
         name?: string;

package/buttons/ColorShadowButton.svelte

@@ -32,4 +32,7 @@ else {
 }
 </script>
 
-<button type={btnType} class={btnClass} on:click>{name}</button>
+<button type={btnType} class={btnClass} on:click {...$$restProps}>
+	{name}
+	<slot />
+</button>

package/buttons/ColorShadowButton.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Buttonshadows, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         textSize?: Textsize;
         color?: Buttonshadows;
         name?: string;
@@ -12,7 +13,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type ColorShadowButtonProps = typeof __propDef.props;
 export declare type ColorShadowButtonEvents = typeof __propDef.events;

package/buttons/GradientDuotoneButton.svelte

@@ -29,4 +29,7 @@ else {
 }
 </script>
 
-<button type={btnType} class={btnClass} on:click>{name}</button>
+<button type={btnType} class={btnClass} on:click {...$$restProps}>
+	{name}
+	<slot />
+</button>

package/buttons/GradientDuotoneButton.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Gradientduotones, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         textSize?: Textsize;
         color?: Gradientduotones;
         name?: string;
@@ -12,7 +13,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type GradientDuotoneButtonProps = typeof __propDef.props;
 export declare type GradientDuotoneButtonEvents = typeof __propDef.events;

package/buttons/GradientMonochromeButton.svelte

@@ -32,4 +32,7 @@ else {
 }
 </script>
 
-<button type={btnType} class={btnClass} on:click>{name}</button>
+<button type={btnType} class={btnClass} on:click {...$$restProps}>
+	{name}
+	<slot />
+</button>

package/buttons/GradientMonochromeButton.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Buttonshadows, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         textSize?: Textsize;
         color?: Buttonshadows;
         name?: string;
@@ -12,7 +13,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type GradientMonochromeButtonProps = typeof __propDef.props;
 export declare type GradientMonochromeButtonEvents = typeof __propDef.events;

package/buttons/GradientOutlineButton.svelte

@@ -38,6 +38,7 @@ else {
 }
 </script>
 
-<button class={btnClass} type={btnType}>
+<button class={btnClass} type={btnType} {...$$restProps}>
 	<span class={spanClass} on:click>{name}</span>
+	<slot />
 </button>

package/buttons/GradientOutlineButton.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Gradientduotones, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         textSize?: Textsize;
         color?: Gradientduotones;
         name?: string;
@@ -12,7 +13,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type GradientOutlineButtonProps = typeof __propDef.props;
 export declare type GradientOutlineButtonEvents = typeof __propDef.events;

package/cards/Card.svelte

@@ -74,7 +74,7 @@ else {
 		{#if $$slots.paragraph}
 			<slot name="paragraph" />
 		{/if}
-		{#if link}
+		{#if link && btnLabel}
 			<a href={link} {rel} class={buttonClass}>
 				{btnLabel}
 				<svg

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/index.d.ts

@@ -31,6 +31,7 @@ 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

@@ -53,7 +53,8 @@ export { default as CarouselTransition } from './carousels/CarouselTransition.sv
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.14.0",
+  "version": "0.14.3",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -25,7 +25,6 @@
     "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.12",
@@ -35,7 +34,6 @@
     "prism-themes": "^1.9.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
-    "svelte-collapse": "^0.0.4",
     "svelte-preprocess": "^4.10.5",
     "svelte2tsx": "^0.5.9",
     "tailwindcss": "^3.0.23",
@@ -76,6 +74,10 @@
     "type": "git",
     "url": "https://github.com/shinokada/flowbite-svelte"
   },
+  "dependencies": {
+    "flowbite": "^1.4.2",
+    "svelte-collapse": "^0.0.4"
+  },
   "exports": {
     "./package.json": "./package.json",
     "./.DS_Store": "./.DS_Store",
@@ -117,6 +119,7 @@
     "./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/types.d.ts

@@ -1,17 +1,37 @@
 import type { SvelteComponent } from 'svelte';
-export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink';
-export declare type DropdownColorType = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
-export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
-export declare type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
-export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow';
-export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
-export declare type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export interface ActivityType {
+    title: HTMLElement | string;
+    date: Date | string;
+    src: string;
+    alt: string;
+    text?: HTMLElement | string;
+}
+export declare type AlignType = 'text-center' | 'text-left' | 'text-right';
+export interface AuthFieldType {
+    label: string;
+    fieldtype: string;
+    required?: boolean;
+    placeholder?: string;
+}
+export declare type AuthFunctionType = () => Promise<void>;
+export interface AvatarType {
+    src?: string;
+    alt?: string;
+    size?: number;
+    border?: boolean;
+    round?: boolean;
+    header?: string;
+    text?: string;
+}
 export interface ButtonGroupType {
     name: string;
     href?: string;
     rel?: string;
     icon?: typeof SvelteComponent;
 }
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
+export declare type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
 export declare type CardButtonType = {
     textSize?: Textsize;
     name: string;
@@ -20,30 +40,32 @@ export declare type CardButtonType = {
     rel?: string;
     rounded?: boolean;
 };
-export declare type ImgType = {
-    src: string;
-    alt?: string;
-};
-export interface LinkType {
-    name: string;
-    href: string;
-    rel?: string;
-}
-export interface SiteType {
-    name: string;
-    href: string;
-    img?: string;
+export interface CheckboxType {
+    id: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    helper?: string;
 }
-export interface SocialMediaType {
+export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink';
+export declare type CrumbType = {
+    label: string;
     href: string;
-    icon: typeof SvelteComponent;
-}
-export declare type AlignType = 'text-center' | 'text-left' | 'text-right';
-export interface TabType {
+};
+export declare type DropdownColorType = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
+export interface DropdownType {
     name: string;
-    active: boolean;
     href: string;
-    rel?: string;
+    divider?: boolean;
+}
+export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow';
+export interface GroupTimelineType {
+    title: string | HTMLElement;
+    src: string;
+    alt: string;
+    href?: string;
+    isPrivate?: boolean;
+    comment?: string | HTMLElement;
 }
 export interface IconTabType {
     name: string;
@@ -52,19 +74,26 @@ export interface IconTabType {
     rel?: string;
     icon?: typeof SvelteComponent;
 }
+export declare type ImgType = {
+    src: string;
+    alt?: string;
+};
+export declare type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export interface InteractiveTabType {
     name: string;
     id: number;
     content: string | typeof SvelteComponent;
 }
-export interface TabHeadType {
-    name: string;
-    id: number;
-}
-export interface PillTabType {
+export interface LinkType {
     name: string;
-    selected: boolean;
     href: string;
+    rel?: string;
+}
+export interface ListCardType {
+    img: ImgType;
+    field1: string;
+    field2?: string;
+    field3?: string;
 }
 export interface NavbarType {
     name: string;
@@ -72,29 +101,26 @@ export interface NavbarType {
     rel?: string;
     child?: NavbarType[];
 }
-export interface SocialMediaLinkType {
-    parent: string;
-    children?: LinkType[];
+export interface PageType {
+    pageNum: number;
+    href: string;
 }
-export interface DropdownType {
+export interface PillTabType {
     name: string;
+    selected: boolean;
     href: string;
-    divider: boolean;
-}
-export interface ListCardType {
-    img: ImgType;
-    field1: string;
-    field2?: string;
-    field3?: string;
 }
-export declare type AuthFunctionType = () => Promise<void>;
-export declare type ButtonType = 'button' | 'submit' | 'reset';
-export interface AuthFieldType {
+export interface RadioType {
+    id: string;
     label: string;
-    fieldtype: string;
-    required?: boolean;
-    placeholder?: string;
+    value: string;
+    checked?: boolean;
+    disabled?: boolean;
 }
+export declare type SelectOptionType = {
+    name: string;
+    value: string;
+};
 export declare type SidebarType = {
     id: number;
     name: string;
@@ -108,20 +134,30 @@ export declare type SidebarCtaType = {
     label: string;
     text: HTMLElement;
 };
-export declare type SelectOptionType = {
+export interface SiteType {
     name: string;
-    value: string;
-};
-export interface AvatarType {
-    src?: string;
-    alt?: string;
-    size?: 6 | 8 | 12 | 16 | 24 | 48;
-    border?: boolean;
-    round?: boolean;
-    header?: string;
-    text?: string;
+    href: string;
+    img?: string;
 }
-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 SocialMediaLinkType {
+    parent: string;
+    children?: LinkType[];
+}
+export interface SocialMediaType {
+    href: string;
+    icon: typeof SvelteComponent;
+}
+export interface TabHeadType {
+    name: string;
+    id: number;
+}
+export interface TabType {
+    name: string;
+    active: boolean;
+    href: string;
+    rel?: string;
+}
+export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
 export interface TimelineItemType {
     date: Date | string;
     title: string;
@@ -144,25 +180,6 @@ export interface TimelineItemHorizontalType {
     icon?: typeof SvelteComponent;
     text?: HTMLElement | string;
 }
-export interface ActivityType {
-    title: HTMLElement | string;
-    date: Date | string;
-    src: string;
-    alt: string;
-    text?: HTMLElement | string;
-}
-export interface GroupTimelineType {
-    title: string | HTMLElement;
-    src: string;
-    alt: string;
-    href?: string;
-    isPrivate?: boolean;
-    comment?: string | HTMLElement;
-}
-export interface PageType {
-    pageNum: number;
-    href: string;
-}
 export interface TransitionParamTypes {
     delay?: number;
     duration?: number;
@@ -170,17 +187,4 @@ export interface TransitionParamTypes {
     css?: (t: number, u: number) => string;
     tick?: (t: number, u: number) => void;
 }
-export interface CheckboxType {
-    id: string;
-    label: string;
-    checked?: boolean;
-    disabled?: boolean;
-    helper?: string;
-}
-export interface RadioType {
-    id: string;
-    label: string;
-    value: string;
-    checked?: boolean;
-    disabled?: boolean;
-}
+export declare type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';