flowbite-svelte 0.23.1 → 0.24.0

package/navbar/NavLi.svelte

@@ -7,7 +7,21 @@ $: aClass = active ? activeClass : nonActiveClass;
 </script>
 
 <li>
-	<a {href} {...$$restProps} class={classNames(aClass, $$props.class)}>
+	<a
+		{href}
+		{...$$restProps}
+		on:blur
+		on:change
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
+		class={classNames(aClass, $$props.class)}
+	>
 		<slot />
 	</a>
 </li>

package/navbar/NavLi.svelte.d.ts

@@ -8,6 +8,17 @@ declare const __propDef: {
         nonActiveClass?: string;
     };
     events: {
+        blur: FocusEvent;
+        change: Event;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.23.1",
+  "version": "0.24.0",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -86,7 +86,7 @@
   },
   "engines": {
     "npm": ">=7.0.0",
-    "node": ">=16.0.0"
+    "node": ">=16.16.0"
   },
   "contributors": [
     "Zoltán Szőgyényi <zoltan@themesberg.com>",
@@ -110,8 +110,6 @@
     "./buttongroups/ButtonGroupItem.svelte": "./buttongroups/ButtonGroupItem.svelte",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
     "./cards/Card.svelte": "./cards/Card.svelte",
-    "./cards/EcommerceCard.svelte": "./cards/EcommerceCard.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",

package/paginations/Next.svelte

@@ -10,7 +10,20 @@ if (!icon) {
 }
 </script>
 
-<a href="/" on:click|preventDefault={next} class={nextClass}>
+<a
+	href="/"
+	on:click|preventDefault={next}
+	class={nextClass}
+	on:blur
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseenter
+	on:mouseleave
+	on:mouseover
+>
 	Next
 	{#if icon}
 		<svg

package/paginations/Next.svelte.d.ts

@@ -5,6 +5,15 @@ declare const __propDef: {
         nextClass?: string;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
         next: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/paginations/Pagination.svelte

@@ -20,7 +20,20 @@ const next = () => {
 	<ul class={ulClass}>
 		<li>
 			{#if icon}
-				<a href="/" on:click|preventDefault={previous} class={iconPreviousClass}>
+				<a
+					href="/"
+					on:click|preventDefault={previous}
+					class={iconPreviousClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover
+				>
 					<span class="sr-only">Previous</span>
 					<svg
 						class="w-5 h-5"
@@ -35,17 +48,55 @@ const next = () => {
 					>
 				</a>
 			{:else}
-				<a href="/" on:click|preventDefault={previous} class={previousClass}>Previous</a>
+				<a
+					href="/"
+					on:click|preventDefault={previous}
+					class={previousClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover>Previous</a
+				>
 			{/if}
 		</li>
 		{#each pages as { pageNum, href }}
 			<li>
-				<a {href} class={pageClass}>{pageNum}</a>
+				<a
+					{href}
+					class={pageClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover>{pageNum}</a
+				>
 			</li>
 		{/each}
 		<li>
 			{#if icon}
-				<a href="/" on:click|preventDefault={next} class={iconNextClass}>
+				<a
+					href="/"
+					on:click|preventDefault={next}
+					class={iconNextClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover
+				>
 					<span class="sr-only">Next</span>
 					<svg
 						class="w-5 h-5"
@@ -60,7 +111,20 @@ const next = () => {
 					>
 				</a>
 			{:else}
-				<a href="/" on:click|preventDefault={next} class={nextClass}>Next</a>
+				<a
+					href="/"
+					on:click|preventDefault={next}
+					class={nextClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover>Next</a
+				>
 			{/if}
 		</li>
 	</ul>

package/paginations/Pagination.svelte.d.ts

@@ -12,6 +12,15 @@ declare const __propDef: {
         iconNextClass?: string;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
         previous: CustomEvent<any>;
         next: CustomEvent<any>;
     } & {

package/paginations/Previous.svelte

@@ -10,7 +10,20 @@ if (icon) {
 }
 </script>
 
-<a href="/" on:click|preventDefault={previous} class={previousClass}>
+<a
+	href="/"
+	on:click|preventDefault={previous}
+	class={previousClass}
+	on:blur
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseenter
+	on:mouseleave
+	on:mouseover
+>
 	{#if icon}
 		<svg
 			class="mr-2 w-5 h-5"

package/paginations/Previous.svelte.d.ts

@@ -5,6 +5,15 @@ declare const __propDef: {
         previousClass?: string;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
         previous: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/paginations/TableData.svelte

@@ -22,7 +22,35 @@ const next = () => {
 	{/if}
 	<!-- Buttons -->
 	<div class="inline-flex mt-2">
-		<button on:click={previous} class={btnPreClass}> Prev </button>
-		<button on:click={next} class={btnNextClass}> Next </button>
+		<button
+			on:click={previous}
+			class={btnPreClass}
+			on:blur
+			on:click
+			on:focus
+			on:keydown
+			on:keypress
+			on:keyup
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+		>
+			Prev
+		</button>
+		<button
+			on:click={next}
+			class={btnNextClass}
+			on:blur
+			on:click
+			on:focus
+			on:keydown
+			on:keypress
+			on:keyup
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+		>
+			Next
+		</button>
 	</div>
 </div>

package/paginations/TableData.svelte.d.ts

@@ -10,6 +10,15 @@ declare const __propDef: {
         btnNextClass?: string;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
         previous: CustomEvent<any>;
         next: CustomEvent<any>;
     } & {

package/sidebars/SidebarDropdownItem.svelte

@@ -8,15 +8,15 @@ export let label = '';
 	<a
 		{...$$restProps}
 		{href}
+		on:blur
 		on:click
-		on:change
+		on:focus
 		on:keydown
+		on:keypress
 		on:keyup
-		on:focus
-		on:blur
 		on:mouseenter
 		on:mouseleave
-		on:mouseenter
+		on:mouseover
 		class={classNames(aClass, $$props.class)}>{label}</a
 	>
 </li>

package/sidebars/SidebarDropdownItem.svelte.d.ts

@@ -7,14 +7,15 @@ declare const __propDef: {
         label?: string;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/sidebars/SidebarItem.svelte

@@ -10,15 +10,15 @@ export let icon;
 	<a
 		{...$$restProps}
 		{href}
+		on:blur
 		on:click
-		on:change
+		on:focus
 		on:keydown
+		on:keypress
 		on:keyup
-		on:focus
-		on:blur
 		on:mouseenter
 		on:mouseleave
-		on:mouseenter
+		on:mouseover
 		class={classNames(aClass, $$props.class)}
 	>
 		<svelte:component

package/sidebars/SidebarItem.svelte.d.ts

@@ -10,14 +10,15 @@ declare const __propDef: {
         icon: IconType;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/DefaultTabs.svelte

@@ -8,15 +8,15 @@
 				{href}
 				{rel}
 				aria-current="page"
+				on:blur
 				on:click
-				on:change
+				on:focus
 				on:keydown
+				on:keypress
 				on:keyup
-				on:focus
-				on:blur
 				on:mouseenter
 				on:mouseleave
-				on:mouseenter
+				on:mouseover
 				class={active
 					? 'inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500'
 					: '  inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300 '}

package/tabs/DefaultTabs.svelte.d.ts

@@ -5,14 +5,15 @@ declare const __propDef: {
         tabs: TabType[];
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/FullWidthTabs.svelte

@@ -27,15 +27,15 @@ export let tabLabel;
 					? 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white'
 					: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'}
 				aria-current="page"
+				on:blur
 				on:click
-				on:change
+				on:focus
 				on:keydown
+				on:keypress
 				on:keyup
-				on:focus
-				on:blur
 				on:mouseenter
 				on:mouseleave
-				on:mouseenter>{name}</a
+				on:mouseover>{name}</a
 			>
 		</li>
 	{/each}

package/tabs/FullWidthTabs.svelte.d.ts

@@ -6,14 +6,15 @@ declare const __propDef: {
         tabLabel: string;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/IconTabs.svelte

@@ -14,15 +14,15 @@ export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dar
 					class={active
 						? 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group'
 						: '  inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group '}
+					on:blur
 					on:click
-					on:change
+					on:focus
 					on:keydown
+					on:keypress
 					on:keyup
-					on:focus
-					on:blur
 					on:mouseenter
 					on:mouseleave
-					on:mouseenter
+					on:mouseover
 				>
 					<svelte:component this={icon} size={iconSize} class={iconClass} />
 					{name}

package/tabs/IconTabs.svelte.d.ts

@@ -6,14 +6,15 @@ declare const __propDef: {
         iconClass?: string;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/InteractiveTabHead.svelte

@@ -44,15 +44,15 @@ Header part of Interactive tab component. Use with TabContent.
 					class:active={activeTabValue === id}
 					aria-controls={name}
 					aria-selected="false"
+					on:blur
 					on:click
-					on:change
+					on:focus
 					on:keydown
+					on:keypress
 					on:keyup
-					on:focus
-					on:blur
 					on:mouseenter
 					on:mouseleave
-					on:mouseenter>{name}</button
+					on:mouseover>{name}</button
 				>
 			</li>
 		{/each}

package/tabs/InteractiveTabHead.svelte.d.ts

@@ -7,14 +7,15 @@ declare const __propDef: {
         activeTabValue?: number;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/InteractiveTabs.svelte

@@ -10,15 +10,15 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 			<li class="mr-2" role="presentation">
 				<button
 					on:click={handleClick(id)}
+					on:blur
 					on:click
-					on:change
+					on:focus
 					on:keydown
+					on:keypress
 					on:keyup
-					on:focus
-					on:blur
 					on:mouseenter
 					on:mouseleave
-					on:mouseenter
+					on:mouseover
 					class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
 					id="{name}-tab"
 					type="button"

package/tabs/InteractiveTabs.svelte.d.ts

@@ -7,14 +7,15 @@ declare const __propDef: {
         tabs: InteractiveTabType[];
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/PillTabs.svelte

@@ -10,15 +10,15 @@
 					: 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'} "
 				{href}
 				rel="external"
+				on:blur
 				on:click
-				on:change
+				on:focus
 				on:keydown
+				on:keypress
 				on:keyup
-				on:focus
-				on:blur
 				on:mouseenter
 				on:mouseleave
-				on:mouseenter>{name}</a
+				on:mouseover>{name}</a
 			>
 		</li>
 	{/each}

package/tabs/PillTabs.svelte.d.ts

@@ -5,14 +5,15 @@ declare const __propDef: {
         tabs: PillTabType[];
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/UnderlineTabs.svelte

@@ -17,7 +17,6 @@ export let tabs;
 					on:blur
 					on:mouseenter
 					on:mouseleave
-					on:mouseenter
 					class={active
 						? 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500'
 						: '  inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 '}

package/toasts/Toast.svelte

@@ -1,6 +1,6 @@
 <script>import classNames from 'classnames';
 import * as transitions from 'svelte/transition';
-import CloseButton from '../utils/CloseButton.svelte';
+import { CloseButton } from '$lib';
 export let color = 'blue';
 export let simple = false;
 // Export a prop through which you can set a desired transition