flowbite-svelte 0.15.22 → 0.15.26

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 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.26](https://github.com/themesberg/flowbite-svelte/compare/v0.15.25...v0.15.26) (2022-05-13)
+
+
+### Bug Fixes
+
+* change from ./package/index.js to index.js for main in package.json ([785fe2c](https://github.com/themesberg/flowbite-svelte/commit/785fe2cd88feded7a2872e85248c84b001c1e3b4))
+
+### [0.15.25](https://github.com/themesberg/flowbite-svelte/compare/v0.15.24...v0.15.25) (2022-05-13)
+
+
+### Bug Fixes
+
+* demo page issues ([268db3c](https://github.com/themesberg/flowbite-svelte/commit/268db3ca3db363ee8bbd6eec69d9f622350050ee))
+* input label margin on empty labels ([e08bb0d](https://github.com/themesberg/flowbite-svelte/commit/e08bb0d5caaf10b2c14a852cc68047be7c9e6fdc))
+* remove button margin ([9cc1795](https://github.com/themesberg/flowbite-svelte/commit/9cc179505bd77ed775fee1879415f191f36b4764))
+
+### [0.15.24](https://github.com/themesberg/flowbite-svelte/compare/v0.15.23...v0.15.24) (2022-05-12)
+
+### [0.15.23](https://github.com/themesberg/flowbite-svelte/compare/v0.15.22...v0.15.23) (2022-05-11)
+
+
+### Features
+
+* more alert options ([7071490](https://github.com/themesberg/flowbite-svelte/commit/7071490d458312c3f0833097c10829b20a34919a))
+
+
+### Bug Fixes
+
+* add handleAlert to Alert component ([bd82de3](https://github.com/themesberg/flowbite-svelte/commit/bd82de36be389de61d4c11348d081e9637dd51b1))
+* demo page bugs ([542b88a](https://github.com/themesberg/flowbite-svelte/commit/542b88a386fdc34acf904b589215441e65b8fb69))
+* demo page text dark mode, dropdown error ([fa46244](https://github.com/themesberg/flowbite-svelte/commit/fa46244d3871bdc5a9cd5bed0f4a3e8b0fc6d3fd))
+
 ### [0.15.22](https://github.com/themesberg/flowbite-svelte/compare/v0.15.21...v0.15.22) (2022-05-10)
 
 ### [0.15.21](https://github.com/themesberg/flowbite-svelte/compare/v0.15.20...v0.15.21) (2022-05-10)

package/alerts/Alert.svelte

@@ -1,127 +1,100 @@
 <script>import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 export let color = 'blue';
-export let alertId = 'alert-1';
+export let icon = null;
 export let closeBtn = false;
-export let btn1 = false;
+export let rounded = true;
+export let borderAccent = false;
 let hidden = false;
-const handlebtn1 = () => {
-    dispatch('handlebtn1');
+const handleAlert = () => {
+    dispatch('handleAlert');
 };
 const handleHide = () => {
     hidden = !hidden;
 };
-let divClass;
-let svgClass;
-let slotClass;
-let buttonClass;
-if (color === 'blue') {
-    divClass = 'flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
-    svgClass = 'flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800';
-    slotClass = 'ml-3 text-sm font-medium text-blue-700 dark:text-blue-800';
-    buttonClass =
-        'ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300';
-}
-else if (color === 'gray') {
-    divClass = 'flex p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200';
-    svgClass = 'flex-shrink-0 w-5 h-5 text-gray-700 dark:text-gray-800';
-    slotClass = 'ml-3 text-sm font-medium text-gray-700 dark:text-gray-800';
-    buttonClass =
-        'ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
+let divClass = 'flex flex-col p-4 mb-4 gap-2 ';
+let contentClass;
+let buttonClass = 'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 ';
+// TODO: update on change
+if (rounded)
+    divClass += 'rounded-lg ';
+if (borderAccent)
+    divClass += 'border-t-4 ';
+if (color === 'gray') {
+    divClass += 'bg-gray-100 dark:bg-gray-200 ';
+    if (borderAccent)
+        divClass += 'border-gray-500 dark:bg-gray-200 ';
+    contentClass = 'text-gray-700 dark:text-gray-800';
+    buttonClass += 'bg-gray-100 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
 }
 else if (color === 'red') {
-    divClass = 'flex p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200';
-    svgClass = 'flex-shrink-0 w-5 h-5 text-red-700 dark:text-red-800';
-    slotClass = 'ml-3 text-sm font-medium text-red-700 dark:text-red-800';
-    buttonClass =
-        'ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300';
+    divClass += 'bg-red-100 dark:bg-red-200';
+    if (borderAccent)
+        divClass += 'border-red-500 dark:bg-red-200 ';
+    contentClass = 'text-red-700 dark:text-red-800';
+    buttonClass += 'bg-red-100 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300';
 }
 else if (color === 'yellow') {
-    divClass = 'flex p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200';
-    svgClass = 'flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800';
-    slotClass = 'ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800';
-    buttonClass =
-        'ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300';
+    divClass += 'bg-yellow-100 dark:bg-yellow-200 ';
+    if (borderAccent)
+        divClass += 'border-yellow-500 dark:bg-tellow-200 ';
+    contentClass = 'text-yellow-700 dark:text-yellow-800';
+    buttonClass += 'bg-yellow-100 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300';
 }
 else if (color === 'green') {
-    divClass = 'flex p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200';
-    svgClass = 'flex-shrink-0 w-5 h-5 text-green-700 dark:text-green-800';
-    slotClass = 'ml-3 text-sm font-medium text-green-700 dark:text-green-800';
-    buttonClass =
-        'ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300';
+    divClass += 'bg-green-100 dark:bg-green-200 ';
+    if (borderAccent)
+        divClass += 'border-green-500 dark:bg-green-200 ';
+    contentClass = 'text-green-700 dark:text-green-800';
+    buttonClass += 'bg-green-100 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300';
 }
 else if (color === 'indigo') {
-    divClass = 'flex p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200';
-    svgClass = 'flex-shrink-0 w-5 h-5 text-indigo-700 dark:text-indigo-800';
-    slotClass = 'ml-3 text-sm font-medium text-indigo-700 dark:text-indigo-800';
-    buttonClass =
-        'ml-auto -mx-1.5 -my-1.5 bg-indigo-100 text-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 p-1.5 hover:bg-indigo-200 inline-flex h-8 w-8 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300';
+    divClass += 'bg-indigo-100 dark:bg-indigo-200 ';
+    if (borderAccent)
+        divClass += 'border-indigo-500 dark:bg-indigo-200 ';
+    contentClass = 'text-indigo-700 dark:text-indigo-800';
+    buttonClass += 'bg-indigo-100 text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300';
 }
 else if (color === 'purple') {
-    divClass = 'flex p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200';
-    svgClass = 'flex-shrink-0 w-5 h-5 text-purple-700 dark:text-purple-800';
-    slotClass = 'ml-3 text-sm font-medium text-purple-700 dark:text-purple-800';
-    buttonClass =
-        'ml-auto -mx-1.5 -my-1.5 bg-purple-100 text-purple-500 rounded-lg focus:ring-2 focus:ring-purple-400 p-1.5 hover:bg-purple-200 inline-flex h-8 w-8 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300';
+    divClass += 'bg-purple-100 dark:bg-purple-200 ';
+    if (borderAccent)
+        divClass += 'border-purple-500 dark:bg-purple-200 ';
+    contentClass = 'text-purple-700 dark:text-purple-800';
+    buttonClass += 'bg-purple-100 text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300';
 }
 else if (color === 'pink') {
-    divClass = 'flex p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200';
-    svgClass = 'flex-shrink-0 w-5 h-5 text-pink-700 dark:text-pink-800';
-    slotClass = 'ml-3 text-sm font-medium text-pink-700 dark:text-pink-800';
-    buttonClass =
-        'ml-auto -mx-1.5 -my-1.5 bg-pink-100 text-pink-500 rounded-lg focus:ring-2 focus:ring-pink-400 p-1.5 hover:bg-pink-200 inline-flex h-8 w-8 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300';
+    divClass += 'bg-pink-100 dark:bg-pink-200 ';
+    if (borderAccent)
+        divClass += 'border-pink-500 dark:bg-pink-200 ';
+    contentClass = 'text-pink-700 dark:text-pink-800';
+    buttonClass += 'bg-pink-100 text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300';
 }
 else {
-    divClass = 'flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
-    svgClass = 'flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800';
-    slotClass = 'ml-3 text-sm font-medium text-blue-700 dark:text-blue-800';
-    buttonClass =
-        'ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
+    divClass += 'bg-blue-100 dark:bg-blue-200 ';
+    if (borderAccent)
+        divClass += 'border-blue-500 dark:bg-blue-200 ';
+    contentClass = 'text-blue-700 dark:text-blue-800';
+    buttonClass += 'bg-blue-100 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300';
 }
-let button1Class = '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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 </script>
 
-<div id={alertId} class:hidden class={divClass} role="alert">
-	<svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-		><path
-			fill-rule="evenodd"
-			d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-			clip-rule="evenodd"
-		/></svg
-	>
-	<div class={slotClass}>
-		<slot />
+<div id={$$props.id} class:hidden class="{divClass} {$$props.class}" role="alert">
+	<div class="flex">
+		{#if icon}
+			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 {contentClass} mr-3" />
+		{/if}
+
+		<div class="text-sm font-medium {contentClass}">
+			<slot name="content" />
+		</div>
+
+		{#if closeBtn}
+			<button on:click={handleHide} on:click={handleAlert} type="button" class={buttonClass} aria-label="Close">
+				<span class="sr-only">Close</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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+			</button>
+		{/if}
 	</div>
-	{#if closeBtn}
-		<button on:click={handleHide} type="button" class={buttonClass} aria-label="Close">
-			<span class="sr-only">Close</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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		</button>
-	{/if}
-	{#if btn1}
-		<button on:click={handlebtn1} type="button" class={buttonClass} aria-label="Close">
-			<span class="sr-only">Close</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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		</button>
-	{/if}
+
+	<slot name="extra" />
 </div>

package/alerts/Alert.svelte.d.ts

@@ -1,19 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from 'svelte';
 import type { Colors } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         color?: Colors;
-        alertId?: string | number;
+        icon?: typeof SvelteComponent | null;
         closeBtn?: boolean;
-        btn1?: boolean;
+        rounded?: boolean;
+        borderAccent?: boolean;
     };
     events: {
-        handlebtn1: CustomEvent<any>;
+        handleAlert: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        content: {};
+        extra: {};
     };
 };
 export declare type AlertProps = typeof __propDef.props;

package/badges/Badge.svelte

@@ -1,33 +1,30 @@
 <script>export let textSize = 'text-xs';
 export let name = 'Read more';
 export let color = 'blue';
-let badgeClass;
-if (color === 'blue') {
-    badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800`;
-}
-else if (color === 'gray') {
-    badgeClass = `bg-gray-100 text-gray-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300`;
+let badgeClass = 'font-semibold mr-2 px-2.5 py-0.5 rounded ';
+if (color === 'gray') {
+    badgeClass += `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`;
 }
 else if (color === 'red') {
-    badgeClass = `bg-red-100 text-red-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-900`;
+    badgeClass += `bg-red-100 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-900`;
 }
 else if (color === 'green') {
-    badgeClass = `bg-green-100 text-green-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-900`;
+    badgeClass += `bg-green-100 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-900`;
 }
 else if (color === 'yellow') {
-    badgeClass = `bg-yellow-100 text-yellow-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-900`;
+    badgeClass += `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-900`;
 }
 else if (color === 'indigo') {
-    badgeClass = `bg-indigo-100 text-indigo-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-900`;
+    badgeClass += `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-900`;
 }
 else if (color === 'purple') {
-    badgeClass = `bg-purple-100 text-purple-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900`;
+    badgeClass += `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-900`;
 }
 else if (color === 'pink') {
-    badgeClass = `bg-pink-100 text-pink-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-900`;
+    badgeClass += `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-900`;
 }
 else {
-    badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800`;
+    badgeClass += `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800`;
 }
 </script>
 

package/badges/BadgeIcon.svelte

@@ -1,33 +1,30 @@
 <script>export let textSize = 'text-xs';
 export let name = '';
 export let color = 'blue';
-let badgeClass;
-if (color === 'blue') {
-    badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-blue-700 dark:text-blue-300`;
-}
-else if (color === 'gray') {
-    badgeClass = `bg-gray-100 text-gray-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-gray-700 dark:text-gray-300`;
+let badgeClass = 'font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 ';
+if (color === 'gray') {
+    badgeClass += `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`;
 }
 else if (color === 'red') {
-    badgeClass = `bg-red-100 text-red-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-red-700 dark:text-red-300`;
+    badgeClass += `bg-red-100 text-red-800 ${textSize} dark:bg-red-700 dark:text-red-300`;
 }
 else if (color === 'green') {
-    badgeClass = `bg-green-100 text-green-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-green-700 dark:text-green-300`;
+    badgeClass += `bg-green-100 text-green-800 ${textSize} dark:bg-green-700 dark:text-green-300`;
 }
 else if (color === 'yellow') {
-    badgeClass = `bg-yellow-100 text-yellow-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-yellow-700 dark:text-yellow-300`;
+    badgeClass += `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-700 dark:text-yellow-300`;
 }
 else if (color === 'indigo') {
-    badgeClass = `bg-indigo-100 text-indigo-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-indigo-700 dark:text-indigo-300`;
+    badgeClass += `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-700 dark:text-indigo-300`;
 }
 else if (color === 'purple') {
-    badgeClass = `bg-purple-100 text-purple-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-purple-700 dark:text-purple-300`;
+    badgeClass += `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-700 dark:text-purple-300`;
 }
 else if (color === 'pink') {
-    badgeClass = `bg-pink-100 text-pink-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-pink-700 dark:text-pink-300`;
+    badgeClass += `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-700 dark:text-pink-300`;
 }
 else {
-    badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-blue-700 dark:text-blue-300`;
+    badgeClass += `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-700 dark:text-blue-300`;
 }
 </script>
 

package/badges/BadgeLink.svelte

@@ -2,33 +2,30 @@
 export let name = 'Read more';
 export let color = 'blue';
 export let href = '/';
-let badgeClass;
-if (color === 'blue') {
-    badgeClass = `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`;
-}
-else if (color === 'gray') {
-    badgeClass = `bg-gray-100 hover:bg-gray-200 text-gray-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300`;
+let badgeClass = 'font-semibold mr-2 px-2.5 py-0.5 rounded ';
+if (color === 'gray') {
+    badgeClass += `bg-gray-100 hover:bg-gray-200 text-gray-800 ${textSize} dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300`;
 }
 else if (color === 'red') {
-    badgeClass = `bg-red-100 hover:bg-red-200 text-red-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800 dark:hover:bg-red-300`;
+    badgeClass += `bg-red-100 hover:bg-red-200 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-800 dark:hover:bg-red-300`;
 }
 else if (color === 'green') {
-    badgeClass = `bg-green-100 hover:bg-green-200 text-green-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800 dark:hover:bg-green-300`;
+    badgeClass += `bg-green-100 hover:bg-green-200 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-800 dark:hover:bg-green-300`;
 }
 else if (color === 'yellow') {
-    badgeClass = `bg-yellow-100 hover:bg-yellow-200 text-yellow-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800 dark:hover:bg-yellow-300`;
+    badgeClass += `bg-yellow-100 hover:bg-yellow-200 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-800 dark:hover:bg-yellow-300`;
 }
 else if (color === 'indigo') {
-    badgeClass = `bg-indigo-100 hover:bg-indigo-200 text-indigo-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-800 dark:hover:bg-indigo-300`;
+    badgeClass += `bg-indigo-100 hover:bg-indigo-200 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-800 dark:hover:bg-indigo-300`;
 }
 else if (color === 'purple') {
-    badgeClass = `bg-purple-100 hover:bg-purple-200 text-purple-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-800 dark:hover:bg-purple-300`;
+    badgeClass += `bg-purple-100 hover:bg-purple-200 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-800 dark:hover:bg-purple-300`;
 }
 else if (color === 'pink') {
-    badgeClass = `bg-pink-100 hover:bg-pink-200 text-pink-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-800 dark:hover:bg-pink-300`;
+    badgeClass += `bg-pink-100 hover:bg-pink-200 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-800 dark:hover:bg-pink-300`;
 }
 else {
-    badgeClass = `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`;
+    badgeClass += `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`;
 }
 </script>
 

package/buttongroups/ButtonGroup.svelte

@@ -1,14 +1,15 @@
 <script>export let buttons;
 let btnLength = buttons.length;
-let classFirst = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-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-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';
-let classMiddle = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b 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';
-let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md 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-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';
+let baseClass = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white 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 ';
+let classFirst = 'rounded-l-lg border';
+let classMiddle = 'border-t border-b';
+let classLast = 'rounded-r-md border';
 </script>
 
 <div class="inline-flex rounded-md shadow-sm" role="group">
 	{#each buttons as { name, icon, href, rel, iconClass, iconSize }, i}
 		{#if i === 0}
-			<button type="button" class={classFirst}>
+			<button type="button" class="{baseClass} {classFirst}">
 				{#if icon}
 					<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
 				{/if}
@@ -19,7 +20,7 @@ let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium
 				{/if}
 			</button>
 		{:else if i === btnLength - 1}
-			<button type="button" class={classLast}>
+			<button type="button" class="{baseClass} {classLast}">
 				{#if icon}
 					<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
 				{/if}
@@ -30,7 +31,7 @@ let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium
 				{/if}
 			</button>
 		{:else}
-			<button type="button" class={classMiddle}>
+			<button type="button" class="{baseClass} {classMiddle}">
 				{#if icon}
 					<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
 				{/if}

package/buttongroups/ButtonGroupOutline.svelte

@@ -1,14 +1,15 @@
 <script>export let buttons;
 let btnLength = buttons.length;
-let classFirst = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent rounded-l-lg border 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';
-let classMiddle = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent border-t border-b 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';
-let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent rounded-r-md border 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';
+let baseClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent  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';
+let classFirst = 'rounded-l-lg border';
+let classMiddle = 'border-t border-b';
+let classLast = 'rounded-r-md border';
 </script>
 
 <div class="inline-flex rounded-md shadow-sm">
 	{#each buttons as { href, name, rel, icon, iconClass, iconSize }, i}
 		{#if i === 0}
-			<button type="button" class={classFirst}>
+			<button type="button" class="{baseClass} {classFirst}">
 				{#if icon}
 					<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
 				{/if}
@@ -19,7 +20,7 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
 				{/if}
 			</button>
 		{:else if i === btnLength - 1}
-			<button type="button" class={classLast}>
+			<button type="button" class="{baseClass} {classLast}">
 				{#if icon}
 					<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
 				{/if}
@@ -30,7 +31,7 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
 				{/if}
 			</button>
 		{:else}
-			<button type="button" class={classMiddle}>
+			<button type="button" class="{baseClass} {classMiddle}">
 				{#if icon}
 					<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
 				{/if}

package/buttons/Button.svelte

@@ -21,67 +21,67 @@ let round = rounded ? 'rounded-full' : 'rounded-lg';
 switch (btnColor) {
     default:
     case 'blue':
-        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
         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`;
+        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 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`;
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
         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`;
+        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 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`;
+        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 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`;
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
         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`;
+        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 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`;
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
         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`;
+        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 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`;
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
         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`;
+        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 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`;
+        buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
         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`;
+        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 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';