flowbite-svelte 0.22.29 → 0.23.1

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 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.23.1](https://github.com/themesberg/flowbite-svelte/compare/v0.23.0...v0.23.1) (2022-08-04)
+
+
+### Features
+
+* add events to components ([d24e023](https://github.com/themesberg/flowbite-svelte/commit/d24e023ba671b9976e2c0df3529a66b15e251cea))
+* add typography page ([52923fb](https://github.com/themesberg/flowbite-svelte/commit/52923fb66b55fed20c876ef7b9348fccadde04a3))
+
+## [0.23.0](https://github.com/themesberg/flowbite-svelte/compare/v0.22.30...v0.23.0) (2022-08-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* add datepicker
+
+### Features
+
+* add datepicker ([a8b70e6](https://github.com/themesberg/flowbite-svelte/commit/a8b70e67b61e4e038520cc66238861e368716e60))
+* add datepicker ([32f8889](https://github.com/themesberg/flowbite-svelte/commit/32f88899256bed9effe6b23b4d24cd8380ce2aff))
+* add datepicker examples ([590ec66](https://github.com/themesberg/flowbite-svelte/commit/590ec660f27e43b18c588d44c0899aa16a3fc870))
+* add datepicker examples ([68e2462](https://github.com/themesberg/flowbite-svelte/commit/68e2462567838816ef116c3ed5b389e8de52f643))
+* working on datepicker ([4fedccf](https://github.com/themesberg/flowbite-svelte/commit/4fedccfc3f04308b53712cc87849098a7e502d2a))
+
+### [0.22.30](https://github.com/themesberg/flowbite-svelte/compare/v0.22.29...v0.22.30) (2022-08-03)
+
+
+### Features
+
+* add Tooltip custom CSS ([1466d16](https://github.com/themesberg/flowbite-svelte/commit/1466d16fff312ccdb22e1c282f49b7b156121d57))
+
+
+### Bug Fixes
+
+* revert Tooltip component ([9cedc68](https://github.com/themesberg/flowbite-svelte/commit/9cedc68014a7114c0e15691c26081bb9f5af88af))
+
 ### [0.22.29](https://github.com/themesberg/flowbite-svelte/compare/v0.22.28...v0.22.29) (2022-08-02)
 
 

package/README.md

@@ -42,17 +42,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
   <td width="33.3333%">
         <a href="https://flowbite-svelte.com/accordions/">
-            <img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
+            <img alt="Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/alerts/">
-            <img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
+            <img alt="Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/avatar/">
-            <img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
+            <img alt="Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
         </a>
     </td>
   </tr>
@@ -65,17 +65,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
   <td width="33.3333%">
         <a href="https://flowbite-svelte.com/badges/">
-            <img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
+            <img alt="Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/breadcrumbs/">
-            <img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
+            <img alt="Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/button-groups/">
-            <img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
+            <img alt="Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
         </a>
     </td>
   </tr>
@@ -88,17 +88,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
   <td width="33.3333%">
         <a href="https://flowbite-svelte.com/buttons/">
-            <img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
+            <img alt="Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/cards/">
-            <img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
+            <img alt="Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/carousels/">
-            <img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
+            <img alt="Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
         </a>
     </td>
   </tr>
@@ -110,17 +110,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/darkmode/">
-            <img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
+            <img alt="Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/dropdowns/">
-            <img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
+            <img alt="Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
         </a>
     </td>
      <td width="33.3333%">
         <a href="https://flowbite-svelte.com/footer/">
-            <img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
+            <img alt="Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
         </a>
     </td>
   </tr>
@@ -132,7 +132,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
    <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/">
-            <img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
+            <img alt="Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
         </a>
     </td>
     <td width="33.3333%">
@@ -142,7 +142,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
     </td>
      <td width="33.3333%">
         <a href="https://flowbite-svelte.com/list-group/">
-            <img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
+            <img alt="List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
         </a>
     </td>
   </tr>
@@ -154,17 +154,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
    <td width="33.3333%">
         <a href="https://flowbite-svelte.com/modals/">
-            <img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
+            <img alt="Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
         </a>
     </td>
      <td width="33.3333%">
         <a href="https://flowbite-svelte.com/navbar/">
-            <img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
+            <img alt="Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/paginations/">
-            <img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
+            <img alt="Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
         </a>
     </td>
   </tr>
@@ -176,17 +176,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
   <td width="33.3333%">
         <a href="https://flowbite-svelte.com/progressbars/">
-            <img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
+            <img alt="Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/ratings/">
-            <img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
+            <img alt="Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/sidebars/">
-            <img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
+            <img alt="Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
         </a>
     </td>
   </tr>
@@ -198,17 +198,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/spinners/">
-            <img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
+            <img alt="Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/tables/">
-            <img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
+            <img alt="Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/tabs/">
-            <img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
+            <img alt="Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
         </a>
     </td>
   </tr>
@@ -220,17 +220,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/timelines/">
-            <img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
+            <img alt="Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/toasts/">
-            <img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
+            <img alt="Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
         </a>
     </td>
        <td width="33.3333%">
         <a href="https://flowbite-svelte.com/tooltips/">
-            <img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
+            <img alt="Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
         </a>
     </td>
   </tr>
@@ -242,17 +242,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/input/">
-            <img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
+            <img alt="Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/file-input/">
-            <img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
+            <img alt="File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/search/">
-            <img alt="Tailwind CSS Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
+            <img alt="Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
         </a>
     </td>
   </tr>
@@ -264,17 +264,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/select/">
-            <img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
+            <img alt="Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/textarea/">
-            <img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
+            <img alt="Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/checkbox/">
-            <img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
+            <img alt="Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
         </a>
     </td>
   </tr>
@@ -286,27 +286,55 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   <tr>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/radio/">
-            <img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
+            <img alt="Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/toggle/">
-            <img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
+            <img alt="Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
         </a>
     </td>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/range/">
-            <img alt="Tailwind CSS Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
+            <img alt="Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
         </a>
     </td>
   </tr>
   <tr>
     <td width="33.3333%">Floating Label</td>
+    <td width="33.3333%">Datepicker</td>
+    <td width="33.3333%">Typography</td>
   </tr>
   <tr>
     <td width="33.3333%">
         <a href="https://flowbite-svelte.com/forms/floating-label/">
-            <img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
+            <img alt="Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte.com/datepicker/">
+            <img alt="Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte.com/typography/">
+            <img alt="Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Skeleton</td>
+    <td width="33.3333%">KBD(Keyboard)</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte.com/skeleton/">
+            <img alt="Skeleton" src="https://flowbite.s3.amazonaws.com/github/skeleton.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte.com/kbd/">
+            <img alt="Kbd, Keyboard" src="https://flowbite.s3.amazonaws.com/github/kbd.jpg">
         </a>
     </td>
   </tr>

package/buttongroups/ButtonGroupItem.svelte

@@ -10,9 +10,33 @@ if (outline) {
 </script>
 
 {#if href}
-	<a {href} {...$$restProps} class={classNames(btnClass, $$props.class)} on:click><slot /></a>
+	<a
+		{href}
+		{...$$restProps}
+		class={classNames(btnClass, $$props.class)}
+		on:click
+		on:change
+		on:keydown
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseenter><slot /></a
+	>
 {:else}
-	<button {type} {...$$restProps} class={classNames(btnClass, $$props.class)} on:click>
+	<button
+		{type}
+		{...$$restProps}
+		class={classNames(btnClass, $$props.class)}
+		on:click
+		on:change
+		on:keydown
+		on:keyup
+		on:focus
+		on:blur
+		on:mouseenter
+		on:mouseleave
+		on:mouseenter
+	>
 		<slot />
 	</button>
 {/if}

package/buttongroups/ButtonGroupItem.svelte.d.ts

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

package/buttons/Button.svelte

@@ -76,6 +76,12 @@ $: gradientOutlineClass = classNames('inline-flex items-center justify-center',
 	{...$$restProps}
 	class={buttonClass}
 	on:click
+	on:change
+	on:keydown
+	on:keyup
+	on:mouseenter
+	on:mouseleave
+	on:mouseenter
 >
 	{#if outline && gradient}
 		<!-- Trick to prentend outline without using border

package/buttons/Button.svelte.d.ts

@@ -12,6 +12,11 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        change: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/datepicker/Calender.svelte

@@ -0,0 +1,12 @@
+<svg
+	aria-hidden="true"
+	class="w-5 h-5 text-gray-500 dark:text-gray-400"
+	fill="currentColor"
+	viewBox="0 0 20 20"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		fill-rule="evenodd"
+		d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+		clip-rule="evenodd"
+	/></svg
+>

package/datepicker/Calender.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  CalenderProps */
+/** @typedef {typeof __propDef.events}  CalenderEvents */
+/** @typedef {typeof __propDef.slots}  CalenderSlots */
+export default class Calender extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CalenderProps = typeof __propDef.props;
+export type CalenderEvents = typeof __propDef.events;
+export type CalenderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/datepicker/Datepicker.svelte

@@ -0,0 +1,71 @@
+<script>// import { onMount } from 'svelte';
+import Calendar from './Calender.svelte';
+export let range = false;
+// autoHide not working
+// export let autoHide: boolean = false;
+export let datepickerButtons = false;
+export let datepickerFormat = 'mm/dd/yyyy';
+export let datepickerOrientation = 'bottom';
+export let datepickerTitle = 'Flowbite datepicker';
+export let attribute = '';
+export let inputClass = '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 pl-10 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';
+$: setAttribute = (node, params) => {
+    node.setAttribute(params, '');
+};
+</script>
+
+<svelte:head>
+	<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
+	<script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
+</svelte:head>
+
+{#if range}
+	<div date-rangepicker class="flex items-center">
+		<div class="relative">
+			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+				<Calendar />
+			</div>
+			<input name="start" type="text" class={inputClass} placeholder="Select date start" />
+		</div>
+		<span class="mx-4 text-gray-500">to</span>
+		<div class="relative">
+			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+				<Calendar />
+			</div>
+			<input name="end" type="text" class={inputClass} placeholder="Select date end" />
+		</div>
+	</div>
+{:else}
+	<div class="relative">
+		<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+			<Calendar />
+		</div>
+		{#if datepickerButtons}
+			<input
+				{...$$restProps}
+				datepicker
+				datepicker-buttons
+				datepicker-format={datepickerFormat}
+				datepicker-orientation={datepickerOrientation}
+				datepicker-title={datepickerTitle}
+				use:setAttribute={attribute}
+				type="text"
+				class={inputClass}
+				placeholder="Select date"
+			/>
+		{:else}
+			<input
+				{...$$restProps}
+				datepicker
+				datepicker-format={datepickerFormat}
+				datepicker-orientation={datepickerOrientation}
+				datepicker-title={datepickerTitle}
+				use:setAttribute={attribute}
+				type="text"
+				class={inputClass}
+				placeholder="Select date"
+			/>
+		{/if}
+		<slot />
+	</div>
+{/if}

package/datepicker/Datepicker.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        range?: boolean;
+        datepickerButtons?: boolean;
+        datepickerFormat?: string;
+        datepickerOrientation?: string;
+        datepickerTitle?: string;
+        attribute?: string;
+        inputClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DatepickerProps = typeof __propDef.props;
+export declare type DatepickerEvents = typeof __propDef.events;
+export declare type DatepickerSlots = typeof __propDef.slots;
+export default class Datepicker extends SvelteComponentTyped<DatepickerProps, DatepickerEvents, DatepickerSlots> {
+}
+export {};

package/dropdowns/DropdownItem.svelte

@@ -11,6 +11,14 @@ const colors = {
 	{...$$restProps}
 	class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
 	on:click|stopPropagation
+	on:change
+	on:keydown
+	on:keyup
+	on:focus
+	on:blur
+	on:mouseenter
+	on:mouseleave
+	on:mouseenter
 >
 	<slot />
 </li>

package/dropdowns/DropdownItem.svelte.d.ts

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

package/forms/Checkbox.svelte

@@ -36,8 +36,16 @@ $: {
 	<input
 		type="checkbox"
 		bind:checked
+		on:keyup
+		on:keydown
+		on:keypress
+		on:focus
+		on:blur
 		on:click
-		on:change
+		on:mouseover
+		on:mouseenter
+		on:mouseleave
+		on:paste
 		{value}
 		{...$$restProps}
 		class={inputClass(custom, color, true, background, $$slots.default || $$props.class)}

package/forms/Checkbox.svelte.d.ts

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

package/forms/Fileupload.svelte

@@ -6,6 +6,17 @@ export let inputClass = 'block w-full text-gray-900 bg-gray-50 rounded-lg border
 
 <input
 	{...$$restProps}
+	on:change
+	on:keyup
+	on:keydown
+	on:keypress
+	on:focus
+	on:blur
+	on:click
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
 	bind:value
 	class={classNames(inputClass, {
 		'mb-5 text-xs': size === 'xs',

package/forms/Fileupload.svelte.d.ts

@@ -7,6 +7,18 @@ declare const __propDef: {
         inputClass?: 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: {};