flowbite-svelte 0.15.6 → 0.15.9

package/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 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.15.9](https://github.com/themesberg/flowbite-svelte/compare/v0.15.8...v0.15.9) (2022-04-30)
+
+
+### Features
+
+* add color and size to Toggle component ([6595bb3](https://github.com/themesberg/flowbite-svelte/commit/6595bb38d95ae42862d134fee979ae97b66ab911))
+
+### [0.15.8](https://github.com/themesberg/flowbite-svelte/compare/v0.15.7...v0.15.8) (2022-04-29)
+
+
+### Bug Fixes
+
+* update for lighthouse ([e81850d](https://github.com/themesberg/flowbite-svelte/commit/e81850db1d00851f2f8b3a1320ef7658f0654674))
+* update links, flowbite svelte link, sitemap links, white for dark mode ([024b079](https://github.com/themesberg/flowbite-svelte/commit/024b079c161678f2a683736a97d4431f8d8a5279))
+
+### [0.15.7](https://github.com/themesberg/flowbite-svelte/compare/v0.15.6...v0.15.7) (2022-04-28)
+
+
+### Bug Fixes
+
+* add 32997restProps to Iconinput ([34c8ad5](https://github.com/themesberg/flowbite-svelte/commit/34c8ad5dc0ca6c1ce39c6281c185274fd0f49ca7))
+
+### [0.15.7](https://github.com/themesberg/flowbite-svelte/compare/v0.15.6...v0.15.7) (2022-04-28)
+
+### Features
+
+* The build process now auto generates component props on build
+
+### Changed
+
+* The 'name' attribute on all buttons is now replaced with the more flexible <slot> pattern. As a consequence the SpinnerButton component has been removed.
+* Added more button use cases in the documentation and merged button/setup and button/default into one
+* Implemented button disable states with different styles and pointer exclusion
+* All buttons now implement 'items-center inline-flex' by default
+* Button can now be futher styled using the incremental 'class' attribute
+
+### Bug Fixes
+
+* button light theme had a color mismatch
+
 ### [0.15.6](https://github.com/themesberg/flowbite-svelte/compare/v0.15.5...v0.15.6) (2022-04-27)
 
 

package/README.md

@@ -5,16 +5,16 @@
 [![release](https://badgen.net/github/release/themesberg/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/releases)
 [![license](https://badgen.net/npm/license/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE)
 
-
-
 [Flowbite-Svelte](https://flowbite-svelte.com/) is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.
 
 ## Installation
 
-- [Getting started](https://flowbite-svelte.com/getting-started)
-- [About](https://flowbite-svelte.com/about)
-- [Type list](https://flowbite-svelte.com/type-list)
-- [CLI](https://flowbite-svelte.com/cli)
+- [Getting started](https://flowbite-svelte.com/pages/getting-started)
+- [About](https://flowbite-svelte.com/pages/about)
+- [Types](https://flowbite-svelte.com/pages/types)
+- [How to contribute](https://flowbite-svelte.com/pages/how-to-contribute)
+- [CLI](https://flowbite-svelte.com/pages/cli)
+- [License](https://flowbite-svelte.com/pages/license)
 
 ## Accordion components
 
@@ -49,7 +49,6 @@
 
 ## Button components
 
-- [Setup](https://flowbite-svelte.com/buttons/setup)
 - [Default Button](https://flowbite-svelte.com/buttons/default)
 - [Colored Shadow Button](https://flowbite-svelte.com/buttons/colored-shadow)
 - [Gradient Duotone Button](https://flowbite-svelte.com/buttons/gradient-duotone)
@@ -57,6 +56,7 @@
 - [Gradietn Outline Button](https://flowbite-svelte.com/buttons/gradient-outline)
 - [Outlined Button](https://flowbite-svelte.com/buttons/outlined)
 - [Rounded Button](https://flowbite-svelte.com/buttons/rounded)
+- [Loader Button](https://flowbite-svelte.com/spinners/button-loader)
 
 ## Card components
 
@@ -84,7 +84,14 @@
 
 ## Form components
 
-- [Forms](https://flowbite-svelte.com/forms)
+- [Checkbox](https://flowbite-svelte.com/forms/checkbox)
+- [File input](https://flowbite-svelte.com/forms/file-input)
+- [Floating label](https://flowbite-svelte.com/forms/floating-label)
+- [Input](https://flowbite-svelte.com/forms/input)
+- [Radio](https://flowbite-svelte.com/forms/radio)
+- [Range](https://flowbite-svelte.com/forms/range)
+- [Textarea](https://flowbite-svelte.com/forms/textarea)
+- [Toggle](https://flowbite-svelte.com/forms/toggle)
 
 ## Footer components
 
@@ -125,6 +132,12 @@
 
 - [Probress bar](https://flowbite-svelte.com/progressbars)
 
+## Rating
+
+- [Rating](https://flowbite-svelte.com/ratings/rating)
+- [Advanced rating](https://flowbite-svelte.com/ratings/advanced-rating)
+- [Score rating](https://flowbite-svelte.com/ratings/score-rating)
+
 ## Sidebar components
 
 - [Sidebar](https://flowbite-svelte.com/sidebars)
@@ -132,7 +145,6 @@
 ## Spinner components
 
 - [Default Spinner](https://flowbite-svelte.com/spinners/default)
-- [Button Spinner](https://flowbite-svelte.com/spinners/button-spinner)
 
 ## Tab components
 
@@ -177,8 +189,7 @@ npm run test
 ## Create props
 
 ```sh
-cd scripts
-node createProps.js
+npm run gen:props
 ```
 
 This will pull all props from components and replace files in `/src/routes/props` directory.

package/auth/Confirm.svelte

@@ -12,7 +12,7 @@ export let error;
 			Your email is confirmed.
 		</h1>
 		<a href={loginLink.href} class="py-4">
-			<Button name={loginLink.name} textSize="text-sm" />
+			<Button textSize="text-sm" >{loginLink.name}</Button>
 		</a>
 	{:else}
 		<Spinner />

package/buttons/Button.svelte

@@ -1,8 +1,8 @@
 <script>export let rounded = false;
 export let textSize = 'text-sm';
-export let name = 'Read more';
 export let btnColor = 'blue';
 export let type = 'button';
+export let disabled = false;
 let paddings;
 if (textSize === 'text-xs') {
     paddings = 'py-2 px-3';
@@ -18,52 +18,75 @@ else {
 }
 let buttonClass;
 let round = rounded ? 'rounded-full' : 'rounded-lg';
-if (btnColor === 'blue') {
-    buttonClass = `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
-}
-else if (btnColor === 'blue-outline') {
-    buttonClass = `text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
-}
-else if (btnColor === 'dark') {
-    buttonClass = buttonClass = `text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
-}
-else if (btnColor === 'dark-outline') {
-    buttonClass = `text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
-}
-else if (btnColor === 'light') {
-    buttonClass = `text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
-}
-else if (btnColor === 'green') {
-    buttonClass = `text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
-}
-else if (btnColor === 'green-outline') {
-    buttonClass = `text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
-}
-else if (btnColor === 'red') {
-    buttonClass = `text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
-}
-else if (btnColor === 'red-outline') {
-    buttonClass = `text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
-}
-else if (btnColor === 'yellow') {
-    buttonClass = `text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:focus:ring-yellow-900`;
-}
-else if (btnColor === 'yellow-outline') {
-    buttonClass = `text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
-}
-else if (btnColor === 'purple') {
-    buttonClass = `text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium ${round} ${textSize} ${paddings} text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
-}
-else if (btnColor === 'purple-outline') {
-    buttonClass = `text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
-}
-else {
-    // blue
-    buttonClass = `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
-}
+switch (btnColor) {
+    default:
+    case 'blue':
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
+        if (disabled)
+            buttonClass += ' bg-blue-400 dark:bg-blue-500 cursor-not-allowed';
+        else
+            buttonClass += ' bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+        break;
+    case 'blue-outline':
+        buttonClass = `text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
+        break;
+    case 'dark':
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
+        if (disabled)
+            buttonClass += ' bg-gray-400 dark:bg-gray-500 cursor-not-allowed';
+        else
+            buttonClass += ' bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700';
+        break;
+    case 'dark-outline':
+        buttonClass = `text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
+        break;
+    case 'light':
+        buttonClass = `text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700`;
+        break;
+    case 'green':
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
+        if (disabled)
+            buttonClass += ' bg-green-400 dark:bg-green-500 cursor-not-allowed';
+        else
+            buttonClass += ' bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+        break;
+    case 'green-outline':
+        buttonClass = `text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
+        break;
+    case 'red':
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
+        if (disabled)
+            buttonClass += ' bg-red-400 dark:bg-red-500 cursor-not-allowed';
+        else
+            buttonClass += ' bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900';
+        break;
+    case 'red-outline':
+        buttonClass = `text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
+        break;
+    case 'yellow':
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
+        if (disabled)
+            buttonClass += ' bg-yellow-400 dark:bg-yellow-500 cursor-not-allowed';
+        else
+            buttonClass += ' bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900';
+        break;
+    case 'yellow-outline':
+        buttonClass = `text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
+        break;
+    case 'purple':
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
+        if (disabled)
+            buttonClass += ' bg-purple-400 dark:bg-purple-500 cursor-not-allowed';
+        else
+            buttonClass += ' bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900';
+        break;
+    case 'purple-outline':
+        buttonClass = `text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
+        break;
+}
+buttonClass += ' items-center inline-flex';
 </script>
 
-<button {type} class={buttonClass} {...$$restProps} on:click>
-	{name}
-	<slot />
+<button {type} class="{buttonClass} {$$props.class}" on:click>
+	<slot>Read more</slot>
 </button>

package/buttons/Button.svelte.d.ts

@@ -5,9 +5,9 @@ declare const __propDef: {
         [x: string]: any;
         rounded?: boolean;
         textSize?: Textsize;
-        name?: string;
         btnColor?: Buttontypes;
         type?: ButtonType;
+        disabled?: boolean;
     };
     events: {
         click: MouseEvent;

package/buttons/ColorShadowButton.svelte

@@ -1,6 +1,5 @@
 <script>export let textSize = 'text-sm';
 export let color = 'blue';
-export let name = 'Read more';
 let btnClass;
 export let type = 'button';
 if (color === 'blue') {
@@ -33,6 +32,5 @@ else {
 </script>
 
 <button {type} class={btnClass} {...$$restProps} on:click>
-	{name}
-	<slot />
+	<slot>Read more</slot>
 </button>

package/buttons/ColorShadowButton.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         [x: string]: any;
         textSize?: Textsize;
         color?: Buttonshadows;
-        name?: string;
         type?: ButtonType;
     };
     events: {

package/buttons/GradientDuotoneButton.svelte

@@ -1,6 +1,5 @@
 <script>export let textSize = 'text-sm';
 export let color = 'purple2blue';
-export let name = 'Read more';
 let btnClass;
 export let type = 'button';
 if (color === 'purple2blue') {
@@ -30,6 +29,5 @@ else {
 </script>
 
 <button {type} class={btnClass} {...$$restProps} on:click>
-	{name}
-	<slot />
+	<slot>Read more</slot>
 </button>

package/buttons/GradientDuotoneButton.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         [x: string]: any;
         textSize?: Textsize;
         color?: Gradientduotones;
-        name?: string;
         type?: ButtonType;
     };
     events: {

package/buttons/GradientMonochromeButton.svelte

@@ -1,6 +1,5 @@
 <script>export let textSize = 'text-sm';
 export let color = 'blue';
-export let name = 'Read more';
 let btnClass;
 export let type = 'button';
 if (color === 'blue') {
@@ -33,6 +32,5 @@ else {
 </script>
 
 <button {type} class={btnClass} {...$$restProps} on:click>
-	{name}
-	<slot />
+	<slot>Read more</slot>
 </button>

package/buttons/GradientMonochromeButton.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         [x: string]: any;
         textSize?: Textsize;
         color?: Buttonshadows;
-        name?: string;
         type?: ButtonType;
     };
     events: {

package/cards/CtaCard.svelte

@@ -44,7 +44,7 @@ else {
 		{#if btns}
 			{#each btns as { name, textSize, type, href, rel, rounded }}
 				<a {href} {rel}>
-					<Button {name} {rounded} {type} {textSize} />
+					<Button {rounded} {type} {textSize}>{name}</Button>
 				</a>
 			{/each}
 		{/if}

package/forms/Iconinput.svelte

@@ -27,14 +27,14 @@ function setType(node) {
 			<div class={noBorderDivClass}>
 				<svelte:component this={icon} size={iconSize} class={iconClass} />
 			</div>
-			<input bind:value use:setType {id} class={noBorderInputClass} {placeholder} />
+			<input bind:value use:setType {id} class={noBorderInputClass} {placeholder} {...$$restProps} />
 		</div>
 	{:else}
 		<div class="flex">
 			<span class={spanClass}>
 				<svelte:component this={icon} size={iconSize} class={iconClass} />
 			</span>
-			<input {type} {id} class={inputClass} {placeholder} />
+			<input {type} {id} class={inputClass} {placeholder} {...$$restProps} />
 		</div>
 	{/if}
 	{#if helper}

package/forms/Toggle.svelte

@@ -1,16 +1,47 @@
 <script>import generateId from '../utils/generateId.js';
 export let name = 'toggle-example';
+export let color;
+export let size = 'default';
 export let id = generateId();
 export let label = 'Toggle me';
+export let value;
 export let checked = false;
 export let disabled = false;
-export let labelClass = 'flex relative items-center mb-4 cursor-pointer';
+export let labelClass = 'relative inline-flex items-center cursor-pointer';
 export let divClass = 'w-11 h-6 bg-gray-200 rounded-full border border-gray-200 toggle-bg dark:bg-gray-700 dark:border-gray-600';
+export let inputClass = 'sr-only';
+if (color || size) {
+    inputClass += ' peer';
+}
 export let spanClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
+if (color === 'red') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600";
+}
+else if (color === 'green') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600";
+}
+else if (color === 'purple') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600";
+}
+else if (color === 'yellow') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-yellow-400";
+}
+else if (color === 'teal') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600";
+}
+else if (color === 'orange') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-orange-500";
+}
+else if (size === 'small') {
+    divClass = "w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
+}
+else if (size === 'large') {
+    divClass = "w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
+}
 </script>
 
 <label for={id} class={labelClass}>
-	<input type="checkbox" {id} class="sr-only" {checked} {name} {disabled} />
-	<div class={divClass} />
+	<input type="checkbox" {id} class={inputClass} {value} {checked} {name} {disabled} />
+	<div class="{divClass} {$$props.class}" />
 	<span class={spanClass}>{label}</span>
 </label>

package/forms/Toggle.svelte.d.ts

@@ -1,13 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ToggleColorType } from '../types.js';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         name?: string;
+        color: ToggleColorType;
+        size?: 'small' | 'default' | 'large';
         id?: string;
         label?: string;
+        value: string;
         checked?: boolean;
         disabled?: boolean;
         labelClass?: string;
         divClass?: string;
+        inputClass?: string;
         spanClass?: string;
     };
     events: {

package/index.js

@@ -7,13 +7,6 @@ export { default as Alert }  from'./alerts/Alert.svelte'
 export { default as BorderAlert }  from'./alerts/BorderAlert.svelte'
 export { default as InfoAlert }   from'./alerts/InfoAlert.svelte'
 
-// Auth
-export { default as Confirm } from'./auth/Confirm.svelte'
-export { default as ForgotPassword } from'./auth/ForgotPassword.svelte'
-export { default as Login } from'./auth/Login.svelte'
-export { default as Register } from'./auth/Register.svelte'
-export { default as Reset } from './auth/Reset.svelte'
-
 // Avatar
 export { default as Avatar } from './avatar/Avatar.svelte'
 
@@ -111,7 +104,6 @@ export { default as Sidebar } from './sidebars/Sidebar.svelte'
 
 // Spin
 export { default as Spinner } from'./spinners/Spinner.svelte'
-export { default as SpinnerButton } from'./spinners/SpinnerButton.svelte'
 
 // Tables
 export { default as Table } from './tables/Table.svelte'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.6",
+  "version": "0.15.9",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -164,7 +164,6 @@
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
     "./sidebars/SidebarDropdown.svelte": "./sidebars/SidebarDropdown.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
-    "./spinners/SpinnerButton.svelte": "./spinners/SpinnerButton.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
     "./tables/TableCheckbox.svelte": "./tables/TableCheckbox.svelte",
     "./tables/TableCheckboxRow.svelte": "./tables/TableCheckboxRow.svelte",

package/spinners/Spinner.svelte

@@ -1,50 +1,46 @@
 <script>export let color = 'blue';
 export let bg = 'text-gray-200';
-export let size = 'w-8 h-8';
-export let align = 'text-center';
-let colorClass;
-if (color === 'blue') {
-    colorClass = 'fill-blue-600';
+export let size = '8';
+// these two props add fine control over the spinner colors
+export let currentFill = 'currentFill';
+export let currentColor = 'currentColor';
+if (currentFill !== 'currentFill') {
+    color = undefined;
+}
+let fillColorClass;
+if (color === undefined) {
+    fillColorClass = '';
+}
+else if (color === 'blue') {
+    fillColorClass = 'fill-blue-600';
 }
 else if (color === 'gray') {
-    colorClass = 'fill-gray-600 dark:fill-gray-300';
+    fillColorClass = 'fill-gray-600';
 }
 else if (color === 'green') {
-    colorClass = 'fill-green-500';
+    fillColorClass = 'fill-green-500';
 }
 else if (color === 'red') {
-    colorClass = 'fill-red-600';
+    fillColorClass = 'fill-red-600';
 }
 else if (color === 'yellow') {
-    colorClass = 'fill-yellow-400';
+    fillColorClass = 'fill-yellow-400';
 }
 else if (color === 'pink') {
-    colorClass = 'fill-pink-600';
+    fillColorClass = 'fill-pink-600';
 }
 else if (color === 'purple') {
-    colorClass = 'fill-purple-600';
+    fillColorClass = 'fill-purple-600';
 }
 else {
-    colorClass = 'fill-blue-600';
+    fillColorClass = 'fill-blue-600';
 }
 </script>
 
-{#if align}
-	<div class={align}>
-		<svg role="status" class="inline mr-2 {size} {bg} animate-spin dark:text-gray-600 {colorClass}" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
-			<path
-				d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-				fill="currentFill"
-			/>
-		</svg>
-	</div>
-{:else}
-	<svg role="status" class="inline mr-2 {size} {bg} animate-spin dark:text-gray-600 {colorClass}" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
-		<path
-			d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-			fill="currentFill"
-		/>
-	</svg>
-{/if}
+<svg role="status" class="inline w-{size} h-{size} mr-2 {bg} animate-spin dark:text-gray-600 {fillColorClass}" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill={currentFill} />
+	<path
+		d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+		fill={currentColor}
+	/>
+</svg>

package/spinners/Spinner.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors, AlignType } from '../types';
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        color?: Colors;
+        color?: Colors | undefined;
         bg?: string;
         size?: string;
-        align?: AlignType;
+        currentFill?: string;
+        currentColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/types.d.ts

@@ -196,6 +196,7 @@ export interface TimelineItemHorizontalType {
     iconClass?: string;
     text?: HTMLElement | string;
 }
+export declare type ToggleColorType = 'red' | 'green' | 'purple' | 'yellow' | 'teal' | 'orange';
 export interface TransitionParamTypes {
     delay?: number;
     duration?: number;

package/spinners/SpinnerButton.svelte

@@ -1,37 +0,0 @@
-<script>export let color;
-let colorClass;
-let fillColor1;
-let fillColor2;
-if (color === 'blue') {
-    colorClass =
-        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center';
-    fillColor1 = '#E5E7EB';
-    fillColor2 = 'currentColor';
-}
-else {
-    colorClass =
-        'py-2.5 px-5 mr-2 text-sm font-medium text-gray-900 bg-white rounded-lg border 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-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 inline-flex items-center';
-    fillColor1 = 'currentColor';
-    fillColor2 = '#1C64F2';
-}
-</script>
-
-<button disabled type="button" class={colorClass}>
-	<svg
-		role="status"
-		class="inline mr-3 w-4 h-4 text-white animate-spin"
-		viewBox="0 0 100 101"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-			fill={fillColor1}
-		/>
-		<path
-			d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-			fill={fillColor2}
-		/>
-	</svg>
-	<slot>Loading ...</slot>
-</button>

package/spinners/SpinnerButton.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        color: 'blue' | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type SpinnerButtonProps = typeof __propDef.props;
-export declare type SpinnerButtonEvents = typeof __propDef.events;
-export declare type SpinnerButtonSlots = typeof __propDef.slots;
-export default class SpinnerButton extends SvelteComponentTyped<SpinnerButtonProps, SpinnerButtonEvents, SpinnerButtonSlots> {
-}
-export {};