flowbite-svelte 0.22.30 → 0.23.2

package/forms/FloatingLabelInput.svelte.d.ts

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

package/forms/Input.svelte

@@ -24,6 +24,16 @@ function setType(node) {
 	bind:value
 	bind:this={ref}
 	on:change
+	on:keyup
+	on:keydown
+	on:keypress
+	on:focus
+	on:blur
+	on:click
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
 	use:setType
 	class={classNames(
 		inputClass,

package/forms/Input.svelte.d.ts

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

package/forms/Radio.svelte

@@ -41,8 +41,17 @@ let background = getContext('background');
 	<input
 		type="radio"
 		bind:group
-		on:click
 		on:change
+		on:keyup
+		on:keydown
+		on:keypress
+		on:focus
+		on:blur
+		on:click
+		on:mouseover
+		on:mouseenter
+		on:mouseleave
+		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;
         change: Event;
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        paste: ClipboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/forms/Range.svelte

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

package/forms/Range.svelte.d.ts

@@ -10,6 +10,12 @@ declare const __propDef: {
         size: 'small' | 'large';
     };
     events: {
+        change: Event;
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        click: MouseEvent;
+    } & {
         [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:change
+			on:keyup
+			on:keydown
+			on:keypress
+			on:focus
+			on:blur
+			on:click
+			on:mouseover
+			on:mouseenter
+			on:mouseleave
+			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;
+        change: Event;
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: 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:change
+	on:keyup
+	on:keydown
+	on:keypress
+	on:focus
+	on:blur
+	on:click
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	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: {
+        change: Event;
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: 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

@@ -14,6 +14,7 @@ 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 Datepicker } from './datepicker/Datepicker.svelte';
 export { default as Drawer } from './drawers/Drawer.svelte';
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';

package/index.js

@@ -24,6 +24,8 @@ 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';
+// Datepicker
+export { default as Datepicker } from './datepicker/Datepicker.svelte';
 // Drawer
 export { default as Drawer } from './drawers/Drawer.svelte';
 // Dropdown

package/navbar/NavDropdown.svelte

@@ -36,7 +36,20 @@ 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:click
+							on:change
+							on:keydown
+							on:keyup
+							on:focus
+							on:blur
+							on:mouseenter
+							on:mouseleave
+							on:mouseenter
+							class={dropdownLinkClassWithChild}>{item.name}</a
+						>
 					</li>
 				{/each}
 			</ul>

package/navbar/NavDropdown.svelte.d.ts

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

package/navbar/NavLi.svelte

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

package/navbar/NavLi.svelte.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.30",
+  "version": "0.23.2",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -119,6 +119,8 @@
     "./carousels/Slide.svelte": "./carousels/Slide.svelte",
     "./carousels/Thumbnail.svelte": "./carousels/Thumbnail.svelte",
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
+    "./datepicker/Calender.svelte": "./datepicker/Calender.svelte",
+    "./datepicker/Datepicker.svelte": "./datepicker/Datepicker.svelte",
     "./drawers/Drawer.svelte": "./drawers/Drawer.svelte",
     "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
     "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",

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:click
+		on:change
+		on:keydown
+		on:keyup
+		on:focus
+		on:blur
+		on:mouseenter
+		on:mouseleave
+		on:mouseenter
+		class={classNames(aClass, $$props.class)}>{label}</a
+	>
 </li>

package/sidebars/SidebarDropdownItem.svelte.d.ts

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

package/sidebars/SidebarItem.svelte

@@ -7,7 +7,20 @@ export let icon;
 </script>
 
 <li>
-	<a {...$$restProps} {href} class={classNames(aClass, $$props.class)}>
+	<a
+		{...$$restProps}
+		{href}
+		on:click
+		on:change
+		on:keydown
+		on:keyup
+		on:focus
+		on:blur
+		on:mouseenter
+		on:mouseleave
+		on:mouseenter
+		class={classNames(aClass, $$props.class)}
+	>
 		<svelte:component
 			this={icon.name}
 			size={icon.size}

package/sidebars/SidebarItem.svelte.d.ts

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

package/tabs/DefaultTabs.svelte

@@ -8,6 +8,15 @@
 				{href}
 				{rel}
 				aria-current="page"
+				on:click
+				on:change
+				on:keydown
+				on:keyup
+				on:focus
+				on:blur
+				on:mouseenter
+				on:mouseleave
+				on:mouseenter
 				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,6 +5,15 @@ declare const __propDef: {
         tabs: TabType[];
     };
     events: {
+        click: MouseEvent;
+        change: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/tabs/FullWidthTabs.svelte

@@ -4,16 +4,39 @@ export let tabLabel;
 
 <div class="sm:hidden">
 	<label for="tabs" class="sr-only">{tabLabel}</label>
-	<select id="tabs" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm 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">
+	<select
+		id="tabs"
+		class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm 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"
+	>
 		{#each tabs as { name }}
 			<option>{name}</option>
 		{/each}
 	</select>
 </div>
-<ul class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400">
+<ul
+	class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400"
+>
 	{#each tabs as { name, href, rel, active }, i}
 		<li class="w-full" data-id={i}>
-			<a {href} {rel} class:rounded-l-lg={i === 0} class:rounded-r-lg={i === tabs.length - 1} class={active ? '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">{name}</a>
+			<a
+				{href}
+				{rel}
+				class:rounded-l-lg={i === 0}
+				class:rounded-r-lg={i === tabs.length - 1}
+				class={active
+					? '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:click
+				on:change
+				on:keydown
+				on:keyup
+				on:focus
+				on:blur
+				on:mouseenter
+				on:mouseleave
+				on:mouseenter>{name}</a
+			>
 		</li>
 	{/each}
 </ul>

package/tabs/FullWidthTabs.svelte.d.ts

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

package/tabs/IconTabs.svelte

@@ -3,10 +3,27 @@ export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dar
 </script>
 
 <div class="border-b border-gray-200 dark:border-gray-700">
-	<ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+	<ul
+		class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400"
+	>
 		{#each tabs as { name, active, href, rel, icon, iconSize }}
 			<li class="mr-2">
-				<a {href} {rel} 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 '}>
+				<a
+					{href}
+					{rel}
+					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:click
+					on:change
+					on:keydown
+					on:keyup
+					on:focus
+					on:blur
+					on:mouseenter
+					on:mouseleave
+					on:mouseenter
+				>
 					<svelte:component this={icon} size={iconSize} class={iconClass} />
 					{name}
 				</a>

package/tabs/IconTabs.svelte.d.ts

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

package/tabs/InteractiveTabHead.svelte

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

package/tabs/InteractiveTabHead.svelte.d.ts

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

package/tabs/InteractiveTabs.svelte

@@ -10,6 +10,15 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 			<li class="mr-2" role="presentation">
 				<button
 					on:click={handleClick(id)}
+					on:click
+					on:change
+					on:keydown
+					on:keyup
+					on:focus
+					on:blur
+					on:mouseenter
+					on:mouseleave
+					on:mouseenter
 					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,6 +7,15 @@ declare const __propDef: {
         tabs: InteractiveTabType[];
     };
     events: {
+        click: MouseEvent;
+        change: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/tabs/PillTabs.svelte

@@ -9,7 +9,16 @@
 					? 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg'
 					: '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">{name}</a
+				rel="external"
+				on:click
+				on:change
+				on:keydown
+				on:keyup
+				on:focus
+				on:blur
+				on:mouseenter
+				on:mouseleave
+				on:mouseenter>{name}</a
 			>
 		</li>
 	{/each}

package/tabs/PillTabs.svelte.d.ts

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