flowbite-svelte 0.22.27 → 0.22.28

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.22.28](https://github.com/themesberg/flowbite-svelte/compare/v0.22.27...v0.22.28) (2022-08-02)
+
+
+### Features
+
+* drawer on progress ([027c6de](https://github.com/themesberg/flowbite-svelte/commit/027c6de72ff563df34a5d56fbe9d8ea571440ff8))
+* start working drawer ([55a0ebf](https://github.com/themesberg/flowbite-svelte/commit/55a0ebfcb29743ad1b5222cad41b6ccf8610582b))
+
+
+### Bug Fixes
+
+* update Tooltip component ([df80539](https://github.com/themesberg/flowbite-svelte/commit/df8053996f8ea67d96ee5e70976a61f13e7df2ec))
+
 ### [0.22.27](https://github.com/themesberg/flowbite-svelte/compare/v0.22.26...v0.22.27) (2022-08-01)
 
 

package/breadcrumbs/Breadcrumb.svelte

@@ -3,7 +3,7 @@ export let navClass = 'flex';
 export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
 </script>
 
-<nav aria-label="Breadcrumb" class={classNames(navClass, $$props.classNav)} {...$$restProps}>
+<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.classNav)}>
 	<ol class={classNames(olClass, $$props.classOl)}>
 		<slot />
 	</ol>

package/buttongroups/ButtonGroupItem.svelte

@@ -1,5 +1,5 @@
-<script>export let type = 'button';
-import classNames from 'classnames';
+<script>import classNames from 'classnames';
+export let type = 'button';
 export let btnClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b last:rounded-r-md border-l last:border-r border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
 export let outlineClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent first:rounded-l-lg border-t border-b  last:rounded-r-md border-l last:border-r border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
 export let outline = false;

package/buttons/Button.svelte

@@ -1,6 +1,5 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
-const background = getContext('background');
 export let pill = false;
 export let outline = false;
 export let gradient = false;
@@ -8,6 +7,7 @@ export let size = 'md';
 export let href = undefined;
 export let color = 'blue';
 export let shadow = null;
+const background = getContext('background');
 const colorClasses = {
     blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
     dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700',

package/drawers/Drawer.svelte

@@ -0,0 +1,44 @@
+<script>import classNames from 'classnames';
+import { fly, slide, blur, fade } from 'svelte/transition';
+import { clickOutside } from '../utils/clickOutside';
+let drawerOpen = false;
+export let id = 'drawer-example';
+export let divClass = 'overflow-y-auto fixed z-40 p-4 w-80 h-screen bg-white dark:bg-gray-800';
+export let transitionParams = {};
+export let transitionType = 'fly';
+function multiple(node, params) {
+    switch (transitionType) {
+        case 'slide':
+            return slide(node, params);
+        case 'blur':
+            return blur(node, params);
+        case 'fly':
+            return fly(node, params);
+        case 'fade':
+            return fade(node, params);
+    }
+}
+let toggle = () => {
+    drawerOpen = !drawerOpen;
+};
+</script>
+
+<div
+	use:clickOutside={() => {
+		if (drawerOpen) {
+			drawerOpen = false;
+		}
+	}}
+>
+	{#if drawerOpen}
+		<div
+			{id}
+			{...$$restProps}
+			class={classNames(divClass, $$props.class)}
+			transition:multiple={transitionParams}
+			tabindex="-1"
+		>
+			<slot {drawerOpen} {toggle} />
+		</div>
+	{/if}
+</div>

package/drawers/Drawer.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id?: string;
+        divClass?: string;
+        transitionParams?: drawerTransitionParamTypes;
+        transitionType?: drawerTransitionTypes;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            drawerOpen: boolean;
+            toggle: () => void;
+        };
+    };
+};
+export declare type DrawerProps = typeof __propDef.props;
+export declare type DrawerEvents = typeof __propDef.events;
+export declare type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
+}
+export {};

package/forms/FloatingLabelInput.svelte

@@ -7,6 +7,7 @@ export let size = 'default';
 export let color = 'base';
 export let value = '';
 export let label = '';
+export let ref = null;
 const divClasses = {
     filled: 'relative',
     outlined: 'relative',
@@ -60,7 +61,6 @@ const labelColorClasses = {
     green: 'text-green-600 dark:text-green-500',
     red: 'text-red-600 dark:text-red-500'
 };
-export let ref = null;
 // you need to this to avoid 2-way binding
 function setType(node) {
     node.type = type;

package/forms/Input.svelte

@@ -5,12 +5,12 @@ export let value = '';
 export let size = 'md';
 export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
 export let color = 'base';
+export let ref = null;
 const colorClasses = {
     base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
     green: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
     red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
 };
-export let ref = null;
 // tinted if put in component having its own background
 let background = getContext('background');
 // you need to this to avoid 2-way binding

package/forms/Select.svelte

@@ -4,9 +4,9 @@ export let value;
 export let placeholder = 'Choose option ...';
 export let underline = false;
 export let size = 'md';
-const common = 'block w-full';
 export let defaultClass = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 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';
 export let underlineClass = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+const common = 'block w-full';
 const sizes = {
     sm: 'text-sm p-2',
     md: 'text-sm p-2.5',

package/forms/SimpleSearch.svelte

@@ -1,6 +1,4 @@
 <script>import { getContext } from 'svelte';
-// tainted if put in component having its own background
-let background = getContext('background');
 export let id = '';
 export let labelClass = 'sr-only';
 export let iconClass = 'w-5 h-5 text-gray-500 dark:text-gray-400';
@@ -8,6 +6,8 @@ export let iconDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 poin
 export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let btnClass = 'p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 export let placeholder = 'Search';
+// tainted if put in component having its own background
+let background = getContext('background');
 </script>
 
 <form class="flex items-center" on:submit>

package/forms/Toggle.svelte

@@ -26,7 +26,16 @@ let divClass;
 $: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size], 'relative');
 </script>
 
-<Checkbox custom {...$$restProps} class={$$props.class}	{value}	bind:checked bind:group	on:click on:change>
+<Checkbox
+	custom
+	{...$$restProps}
+	class={$$props.class}
+	{value}
+	bind:checked
+	bind:group
+	on:click
+	on:change
+>
 	<div class={divClass} />
 	<slot />
 </Checkbox>

package/index.d.ts

@@ -9,15 +9,12 @@ 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 HorizontalCard } from './cards/HorizontalCard.svelte';
-export { default as InteractiveCard } from './cards/InteractiveCard.svelte';
-export { default as ListCard } from './cards/ListCard.svelte';
-export { default as CtaCard } from './cards/CtaCard.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';
+export { default as Drawer } from './drawers/Drawer.svelte';
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
 export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
@@ -40,11 +37,11 @@ export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';
 export { default as Search } from './forms/Search.svelte';
-export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
-export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 export { default as Select } from './forms/Select.svelte';
+export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
+export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
 export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
@@ -52,13 +49,6 @@ export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
 export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
 export { default as List } from './list-group/List.svelte';
 export { default as ListItem } from './list-group/ListItem.svelte';
-export { modalIdStore } from './modals/modalStores.js';
-export { default as ExtraLargeModal } from './modals/ExtraLargeModal.svelte';
-export { default as LargeModal } from './modals/LargeModal.svelte';
-export { default as MediumModal } from './modals/MediumModal.svelte';
-export { default as ModalButton } from './modals/ModalButton.svelte';
-export { default as SignInModal } from './modals/SignInModal.svelte';
-export { default as SmallModal } from './modals/SmallModal.svelte';
 export { default as Modal } from './modals/Modal.svelte';
 export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
 export { default as Navbar } from './navbar/Navbar.svelte';
@@ -67,7 +57,6 @@ export { default as NavDropdown } from './navbar/NavDropdown.svelte';
 export { default as NavHamburger } from './navbar/NavHamburger.svelte';
 export { default as NavLi } from './navbar/NavLi.svelte';
 export { default as NavUl } from './navbar/NavUl.svelte';
-export { default as DropdownNavbar } from './navbar/DropdownNavbar.svelte';
 export { default as Pagination } from './paginations/Pagination.svelte';
 export { default as Previous } from './paginations/Previous.svelte';
 export { default as Next } from './paginations/Next.svelte';

package/index.js

@@ -17,10 +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 HorizontalCard } from './cards/HorizontalCard.svelte';
-export { default as InteractiveCard } from './cards/InteractiveCard.svelte';
-export { default as ListCard } from './cards/ListCard.svelte';
-export { default as CtaCard } from './cards/CtaCard.svelte';
 export { default as EcommerceCard } from './cards/EcommerceCard.svelte';
 export { default as SignInCard } from './cards/SignInCard.svelte';
 // Carousels
@@ -28,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';
+// Drawer
+export { default as Drawer } from './drawers/Drawer.svelte';
 // Dropdown
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
@@ -53,11 +51,11 @@ export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';
 export { default as Search } from './forms/Search.svelte';
-export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
-export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 export { default as Select } from './forms/Select.svelte';
+export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
+export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 // Kbd
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
@@ -68,13 +66,6 @@ export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
 export { default as List } from './list-group/List.svelte';
 export { default as ListItem } from './list-group/ListItem.svelte';
 // Modals
-export { modalIdStore } from './modals/modalStores.js';
-export { default as ExtraLargeModal } from './modals/ExtraLargeModal.svelte';
-export { default as LargeModal } from './modals/LargeModal.svelte';
-export { default as MediumModal } from './modals/MediumModal.svelte';
-export { default as ModalButton } from './modals/ModalButton.svelte';
-export { default as SignInModal } from './modals/SignInModal.svelte';
-export { default as SmallModal } from './modals/SmallModal.svelte';
 export { default as Modal } from './modals/Modal.svelte';
 // MegaMenu
 export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
@@ -85,7 +76,6 @@ export { default as NavDropdown } from './navbar/NavDropdown.svelte';
 export { default as NavHamburger } from './navbar/NavHamburger.svelte';
 export { default as NavLi } from './navbar/NavLi.svelte';
 export { default as NavUl } from './navbar/NavUl.svelte';
-export { default as DropdownNavbar } from './navbar/DropdownNavbar.svelte';
 // Pagination
 export { default as Pagination } from './paginations/Pagination.svelte';
 export { default as Previous } from './paginations/Previous.svelte';

package/modals/Modal.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         open?: boolean;
         title?: string;
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-        placement?: string;
+        placement?: 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
         autoclose?: boolean;
         backdropClasses?: string;
     };

package/navbar/NavDropdown.svelte

@@ -2,15 +2,15 @@
 export let liButtonClass = 'flex items-center justify-between w-full';
 export let name;
 export let child = [];
+export let dropdownDiv = '';
+export let dropdownLinkClassWithChild = undefined;
+export let rel = undefined;
 let hidden = true;
 let block = false;
 const handleDropdown = () => {
     hidden = !hidden;
     block = !block;
 };
-export let dropdownDiv = '';
-export let dropdownLinkClassWithChild = undefined;
-export let rel = undefined;
 let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700';
 </script>
 

package/navbar/NavUl.svelte

@@ -4,7 +4,6 @@ import { quintOut } from 'svelte/easing';
 export let divClass = 'w-full md:block md:w-auto';
 export let ulClass = 'flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
 export let hidden = true;
-// $: hidden;
 </script>
 
 {#if !hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.27",
+  "version": "0.22.28",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -110,11 +110,7 @@
     "./buttongroups/ButtonGroupItem.svelte": "./buttongroups/ButtonGroupItem.svelte",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
     "./cards/Card.svelte": "./cards/Card.svelte",
-    "./cards/CtaCard.svelte": "./cards/CtaCard.svelte",
     "./cards/EcommerceCard.svelte": "./cards/EcommerceCard.svelte",
-    "./cards/HorizontalCard.svelte": "./cards/HorizontalCard.svelte",
-    "./cards/InteractiveCard.svelte": "./cards/InteractiveCard.svelte",
-    "./cards/ListCard.svelte": "./cards/ListCard.svelte",
     "./cards/SignInCard.svelte": "./cards/SignInCard.svelte",
     "./carousels/Caption.svelte": "./carousels/Caption.svelte",
     "./carousels/Carousel.svelte": "./carousels/Carousel.svelte",
@@ -123,6 +119,7 @@
     "./carousels/Slide.svelte": "./carousels/Slide.svelte",
     "./carousels/Thumbnail.svelte": "./carousels/Thumbnail.svelte",
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
+    "./drawers/Drawer.svelte": "./drawers/Drawer.svelte",
     "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
     "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",
     "./dropdowns/DropdownHeader.svelte": "./dropdowns/DropdownHeader.svelte",
@@ -133,10 +130,6 @@
     "./footer/FooterIcon.svelte": "./footer/FooterIcon.svelte",
     "./footer/FooterLink.svelte": "./footer/FooterLink.svelte",
     "./footer/FooterLinkGroup.svelte": "./footer/FooterLinkGroup.svelte",
-    "./footer/LogoFooter.svelte": "./footer/LogoFooter.svelte",
-    "./footer/SimpleFooter.svelte": "./footer/SimpleFooter.svelte",
-    "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",
-    "./footer/SocialMediaFooter.svelte": "./footer/SocialMediaFooter.svelte",
     "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
     "./forms/Dropzone.svelte": "./forms/Dropzone.svelte",
     "./forms/Fileupload.svelte": "./forms/Fileupload.svelte",
@@ -151,7 +144,6 @@
     "./forms/Search.svelte": "./forms/Search.svelte",
     "./forms/Select.svelte": "./forms/Select.svelte",
     "./forms/SimpleSearch.svelte": "./forms/SimpleSearch.svelte",
-    "./forms/SingleCheckbox.svelte": "./forms/SingleCheckbox.svelte",
     "./forms/Textarea.svelte": "./forms/Textarea.svelte",
     "./forms/Toggle.svelte": "./forms/Toggle.svelte",
     "./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
@@ -164,15 +156,7 @@
     "./list-group/List.svelte": "./list-group/List.svelte",
     "./list-group/ListItem.svelte": "./list-group/ListItem.svelte",
     "./megamenu/MegaMenu.svelte": "./megamenu/MegaMenu.svelte",
-    "./modals/ExtraLargeModal.svelte": "./modals/ExtraLargeModal.svelte",
-    "./modals/LargeModal.svelte": "./modals/LargeModal.svelte",
-    "./modals/MediumModal.svelte": "./modals/MediumModal.svelte",
     "./modals/Modal.svelte": "./modals/Modal.svelte",
-    "./modals/ModalButton.svelte": "./modals/ModalButton.svelte",
-    "./modals/SignInModal.svelte": "./modals/SignInModal.svelte",
-    "./modals/SmallModal.svelte": "./modals/SmallModal.svelte",
-    "./modals/modalStores": "./modals/modalStores.js",
-    "./navbar/DropdownNavbar.svelte": "./navbar/DropdownNavbar.svelte",
     "./navbar/NavBrand.svelte": "./navbar/NavBrand.svelte",
     "./navbar/NavDropdown.svelte": "./navbar/NavDropdown.svelte",
     "./navbar/NavHamburger.svelte": "./navbar/NavHamburger.svelte",

package/paginations/Next.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher } from 'svelte';
 export let icon = false;
+export let nextClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 const dispatch = createEventDispatcher();
 const next = () => {
     dispatch('next');
 };
-export let nextClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 if (!icon) {
     nextClass += ' ml-3';
 }
@@ -13,6 +13,16 @@ if (!icon) {
 <a href="/" on:click|preventDefault={next} class={nextClass}>
 	Next
 	{#if icon}
-		<svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+		<svg
+			class="ml-2 w-5 h-5"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/></svg
+		>
 	{/if}
 </a>

package/paginations/Pagination.svelte

@@ -1,12 +1,5 @@
 <script>import { createEventDispatcher } from 'svelte';
 export let icon = false;
-const dispatch = createEventDispatcher();
-const previous = () => {
-    dispatch('previous');
-};
-const next = () => {
-    dispatch('next');
-};
 export let pages;
 export let ulClass = 'inline-flex -space-x-px items-center';
 export let pageClass = 'py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
@@ -14,6 +7,13 @@ export let previousClass = 'py-2 px-3 ml-0 leading-tight text-gray-500 bg-white
 export let nextClass = 'py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 export let iconPreviousClass = 'block py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+const dispatch = createEventDispatcher();
+const previous = () => {
+    dispatch('previous');
+};
+const next = () => {
+    dispatch('next');
+};
 </script>
 
 <nav aria-label="Page navigation">
@@ -22,7 +22,17 @@ export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white
 			{#if icon}
 				<a href="/" on:click|preventDefault={previous} class={iconPreviousClass}>
 					<span class="sr-only">Previous</span>
-					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
+					<svg
+						class="w-5 h-5"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+							clip-rule="evenodd"
+						/></svg
+					>
 				</a>
 			{:else}
 				<a href="/" on:click|preventDefault={previous} class={previousClass}>Previous</a>
@@ -37,7 +47,17 @@ export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white
 			{#if icon}
 				<a href="/" on:click|preventDefault={next} class={iconNextClass}>
 					<span class="sr-only">Next</span>
-					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>
+					<svg
+						class="w-5 h-5"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+							clip-rule="evenodd"
+						/></svg
+					>
 				</a>
 			{:else}
 				<a href="/" on:click|preventDefault={next} class={nextClass}>Next</a>

package/paginations/Previous.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher } from 'svelte';
 export let icon = false;
+export let previousClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 const dispatch = createEventDispatcher();
 const previous = () => {
     dispatch('previous');
 };
-export let previousClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 if (icon) {
     previousClass += ' mr-3';
 }
@@ -12,7 +12,17 @@ if (icon) {
 
 <a href="/" on:click|preventDefault={previous} class={previousClass}>
 	{#if icon}
-		<svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
+		<svg
+			class="mr-2 w-5 h-5"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
+				clip-rule="evenodd"
+			/></svg
+		>
 	{/if}
 	Previous
 </a>

package/paginations/TableData.svelte

@@ -1,4 +1,7 @@
 <script>import { createEventDispatcher } from 'svelte';
+export let helper;
+export let btnPreClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 const dispatch = createEventDispatcher();
 const previous = () => {
     dispatch('previous');
@@ -6,9 +9,6 @@ const previous = () => {
 const next = () => {
     dispatch('next');
 };
-export let helper;
-export let btnPreClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 </script>
 
 <div class="flex flex-col items-center">

package/progressbars/Progressbar.svelte

@@ -1,33 +1,19 @@
-<script>export let progress = '45';
+<script>import classNames from 'classnames';
+export let progress = '45';
 export let size = 'h-2.5';
 export let labelInside = false;
 export let labelOutside = '';
 export let color = 'blue';
-let barColor;
-if (color === 'blue') {
-    barColor = 'bg-blue-600';
-}
-else if (color === 'gray') {
-    barColor = 'bg-gray-600 dark:bg-gray-300';
-}
-else if (color === 'red') {
-    barColor = 'bg-red-600 dark:bg-red-500';
-}
-else if (color === 'green') {
-    barColor = 'bg-green-600 dark:bg-green-500';
-}
-else if (color === 'yellow') {
-    barColor = 'bg-yellow-400 ';
-}
-else if (color === 'purple') {
-    barColor = 'bg-purple-600 dark:bg-purple-500';
-}
-else if (color === 'indigo') {
-    barColor = 'bg-indigo-600 dark:bg-indigo-500';
-}
-else {
-    barColor = 'bg-blue-600 dark:bg-blue-500';
-}
+// let barColor: string;
+const barColors = {
+    blue: 'bg-blue-600',
+    gray: 'bg-gray-600 dark:bg-gray-300',
+    red: 'bg-red-600 dark:bg-red-500',
+    green: 'bg-green-600 dark:bg-green-500',
+    yellow: 'bg-yellow-400',
+    purple: 'bg-purple-600 dark:bg-purple-500',
+    indigo: 'bg-indigo-600 dark:bg-indigo-500'
+};
 </script>
 
 {#if labelOutside}
@@ -38,10 +24,13 @@ else {
 {/if}
 <div class="w-full bg-gray-200 rounded-full {size} dark:bg-gray-700">
 	{#if labelInside}
-		<div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" style="width: {progress}%">
+		<div
+			class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
+			style="width: {progress}%"
+		>
 			{progress}%
 		</div>
 	{:else}
-		<div class="{barColor} {size} rounded-full" style="width: {progress}%" />
+		<div class={classNames(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
 	{/if}
 </div>

package/spinners/Spinner.svelte

@@ -2,10 +2,10 @@
 export let color = 'blue';
 export let bg = 'text-gray-300';
 export let size = '8';
-let iconsize = `w-${size} h-${size}`;
 // these two props add fine control over the spinner colors
 export let currentFill = 'currentFill';
 export let currentColor = 'currentColor';
+let iconsize = `w-${size} h-${size}`;
 if (currentFill !== 'currentFill') {
     color = undefined;
 }