flowbite-svelte 0.23.0 → 0.23.3

package/forms/Radio.svelte

@@ -41,8 +41,17 @@ let background = getContext('background');
 	<input
 		type="radio"
 		bind:group
-		on:click
+		on:blur
 		on:change
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
+		on:paste
 		{value}
 		{...$$restProps}
 		class={inputClass(custom, color, false, background, $$slots.default || $$props.class)}

package/forms/Radio.svelte.d.ts

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

package/forms/Range.svelte

@@ -26,4 +26,9 @@ else {
 	bind:value
 	{step}
 	class={inputClass}
+	on:change
+	on:click
+	on:keydown
+	on:keypress
+	on:keyup
 />

package/forms/Range.svelte.d.ts

@@ -10,6 +10,12 @@ declare const __propDef: {
         size: 'small' | 'large';
     };
     events: {
+        change: Event;
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/forms/Search.svelte

@@ -23,7 +23,24 @@ export let placeholder = 'Search';
 				/></svg
 			>
 		</div>
-		<input {...$$restProps} type="search" {id} class={inputClass} {placeholder} />
+		<input
+			{...$$restProps}
+			on:blur
+			on:change
+			on:click
+			on:focus
+			on:keydown
+			on:keypress
+			on:keyup
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+			on:paste
+			type="search"
+			{id}
+			class={inputClass}
+			{placeholder}
+		/>
 		<button type="submit" class={btnClass}>Search</button>
 	</div>
 </form>

package/forms/Search.svelte.d.ts

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

package/forms/SimpleSearch.svelte

@@ -27,6 +27,17 @@ let background = getContext('background');
 			>
 		</div>
 		<input
+			on:blur
+			on:change
+			on:click
+			on:focus
+			on:keydown
+			on:keypress
+			on:keyup
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+			on:paste
 			{...$$restProps}
 			type="text"
 			{id}

package/forms/SimpleSearch.svelte.d.ts

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

package/forms/Textarea.svelte

@@ -13,7 +13,26 @@ 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 bind:this={ref} {id} {name} {rows} class={textareaClass} {placeholder} />
+<textarea
+	bind:value
+	bind:this={ref}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseenter
+	on:mouseleave
+	on:mouseover
+	on:paste
+	{id}
+	{name}
+	{rows}
+	class={textareaClass}
+	{placeholder}
+/>
 {#if helper}
 	<p class={helperClass}>{@html helper}</p>
 {/if}

package/forms/Textarea.svelte.d.ts

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

package/forms/Toggle.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        change: Event;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/index.d.ts

@@ -9,8 +9,6 @@ export { default as Button } from './buttons/Button.svelte';
 export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
 export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 export { default as Card } from './cards/Card.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';

package/index.js

@@ -17,8 +17,6 @@ export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
 export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 // Cards
 export { default as Card } from './cards/Card.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';

package/list-group/ListItem.svelte

@@ -29,6 +29,16 @@ $: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded
 		class="block {itemClass}"
 		on:click={() => dispatch('click', $$props)}
 		aria-current={current}
+		on:blur
+		on:change
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
 	>
 		<slot item={$$props} />
 	</a>
@@ -37,6 +47,16 @@ $: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded
 		class="inline-flex relative items-center text-left {itemClass}"
 		{disabled}
 		on:click={() => dispatch('click', $$props)}
+		on:blur
+		on:change
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
 		aria-current={current}
 	>
 		<slot item={$$props} />

package/list-group/ListItem.svelte.d.ts

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

package/navbar/NavDropdown.svelte

@@ -36,7 +36,21 @@ let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-
 			<ul class="py-1" aria-labelledby="dropdownLargeButton">
 				{#each child as item}
 					<li>
-						<a href={item.href} {rel} class={dropdownLinkClassWithChild}>{item.name}</a>
+						<a
+							href={item.href}
+							{rel}
+							on:blur
+							on:change
+							on:click
+							on:focus
+							on:keydown
+							on:keypress
+							on:keyup
+							on:mouseenter
+							on:mouseleave
+							on:mouseover
+							class={dropdownLinkClassWithChild}>{item.name}</a
+						>
 					</li>
 				{/each}
 			</ul>

package/navbar/NavDropdown.svelte.d.ts

@@ -10,6 +10,17 @@ declare const __propDef: {
         rel?: 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/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.0",
+  "version": "0.23.3",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -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

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

package/sidebars/SidebarDropdownItem.svelte.d.ts

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