flowbite-svelte 0.14.15 → 0.15.1

package/timelines/Group.svelte

@@ -1,4 +1,4 @@
-<script >export let divClass = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
+<script>export let divClass = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
 export let timeClass = 'text-lg font-semibold text-gray-900 dark:text-white';
 export let date;
 </script>

package/timelines/GroupItem.svelte

@@ -1,4 +1,4 @@
-<script >export let timelines;
+<script>export let timelines;
 </script>
 
 {#each timelines as { title, src, alt, isPrivate, href, comment }}

package/timelines/Timeline.svelte

@@ -1,4 +1,4 @@
-<script >export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+<script>export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
 </script>
 
 <ol class={olClass}>

package/timelines/TimelineHorizontal.svelte

@@ -1,4 +1,4 @@
-<script >export let olClass = 'items-center sm:flex';
+<script>export let olClass = 'items-center sm:flex';
 </script>
 
 <ol class={olClass}>

package/timelines/TimelineItem.svelte

@@ -1,4 +1,4 @@
-<script >export let timelineItems;
+<script>export let timelineItems;
 </script>
 
 {#each timelineItems as { date, title, text, href, linkname }}

package/timelines/TimelineItemHorizontal.svelte

@@ -1,35 +1,21 @@
-<script >export let timelineItems;
+<script>export let timelineItems;
 </script>
 
-{#each timelineItems as { date, title, text, icon }}
+{#each timelineItems as { date, title, text, icon, iconClass, iconSize }}
 	<li class="relative mb-6 sm:mb-0">
 		<div class="flex items-center">
-			<div
-				class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0"
-			>
+			<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
 				{#if icon}
-					<svelte:component this={icon} className="h-4 w-4" />
+					<svelte:component this={icon} size={iconSize} class={iconClass} />
 				{:else}
-					<svg
-						class="w-3 h-3 text-blue-600 dark:text-blue-300"
-						fill="currentColor"
-						viewBox="0 0 20 20"
-						xmlns="http://www.w3.org/2000/svg"
-						><path
-							fill-rule="evenodd"
-							d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-							clip-rule="evenodd"
-						/></svg
-					>
+					<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
 				{/if}
 			</div>
 			<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
 		</div>
 		<div class="mt-3 sm:pr-8">
 			<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
-			<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-				>{date}</time
-			>
+			<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{date}</time>
 			<p class="text-base font-normal text-gray-500 dark:text-gray-400">
 				{text}
 			</p>

package/timelines/TimelineItemVertical.svelte

@@ -1,53 +1,27 @@
-<script >export let timelineItems;
+<script>export let timelineItems;
 </script>
 
-{#each timelineItems as { date, title, text, href, linkname, icon }}
+{#each timelineItems as { date, title, text, href, linkname, icon, iconClass, iconSize }}
 	<li class="mb-10 ml-6">
-		<span
-			class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"
-		>
+		<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
 			{#if icon}
-				<svelte:component this={icon} className="h-4 w-4" />
+				<svelte:component this={icon} size={iconSize} class={iconClass} />
 			{:else}
-				<svg
-					class="w-3 h-3 text-blue-600 dark:text-blue-300"
-					fill="currentColor"
-					viewBox="0 0 20 20"
-					xmlns="http://www.w3.org/2000/svg"
-					><path
-						fill-rule="evenodd"
-						d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-						clip-rule="evenodd"
-					/></svg
-				>
+				<svg width="20" height="20" class="text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
 			{/if}
 		</span>
 
 		<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">
 			{title}
 		</h3>
-		<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-			>{date}</time
-		>
+		<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{date}</time>
 		<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
 			{text}
 		</p>
 		{#if href}
-			<a
-				{href}
-				class="inline-flex items-center py-2 px-4 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-4 focus:outline-none focus:ring-gray-200 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 dark:focus:ring-gray-700"
+			<a {href} class="inline-flex items-center py-2 px-4 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-4 focus:outline-none focus:ring-gray-200 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 dark:focus:ring-gray-700"
 				>{linkname}
-				<svg
-					class="ml-2 w-3 h-3"
-					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
-				></a
+				<svg class="ml-2 w-3 h-3" 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></a
 			>
 		{/if}
 	</li>

package/toasts/Toast.svelte

@@ -1,4 +1,4 @@
-<script >import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import { fade, blur, fly, slide } from 'svelte/transition';
 let visible = true;
 const handleHide = () => {
     visible = !visible;

package/tooltips/LightTooltip.svelte

@@ -1,4 +1,4 @@
-<script >export let tip;
+<script>export let tip;
 export let top = false;
 export let right = false;
 export let bottom = false;

package/tooltips/Tooltip.svelte

@@ -1,4 +1,4 @@
-<script >export let tip;
+<script>export let tip;
 export let top = false;
 export let right = false;
 export let bottom = false;

package/types.d.ts

@@ -28,6 +28,8 @@ export interface ButtonGroupType {
     href?: string;
     rel?: string;
     icon?: typeof SvelteComponent;
+    iconSize?: number;
+    iconClass?: string;
 }
 export declare type ButtonType = 'button' | 'submit' | 'reset';
 export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
@@ -73,6 +75,7 @@ export interface IconTabType {
     href: string;
     rel?: string;
     icon?: typeof SvelteComponent;
+    iconSize?: number;
 }
 export declare type ImgType = {
     src: string;
@@ -126,6 +129,8 @@ export declare type SidebarType = {
     name: string;
     href?: string;
     icon?: typeof SvelteComponent;
+    iconSize?: number;
+    iconClass?: string;
     rel?: string;
     children?: SidebarType[];
     subtext?: HTMLElement;
@@ -146,6 +151,8 @@ export interface SocialMediaLinkType {
 export interface SocialMediaType {
     href: string;
     icon: typeof SvelteComponent;
+    iconSize?: number;
+    iconClass?: string;
 }
 export interface TabHeadType {
     name: string;
@@ -170,6 +177,8 @@ export interface TimelineItemVerticalType {
     date: Date | string;
     title: string;
     icon?: typeof SvelteComponent;
+    iconSize?: number;
+    iconClass?: string;
     href?: string;
     linkname?: string;
     text?: HTMLElement | string;
@@ -178,6 +187,8 @@ export interface TimelineItemHorizontalType {
     date: Date | string;
     title: string;
     icon?: typeof SvelteComponent;
+    iconSize?: number;
+    iconClass?: string;
     text?: HTMLElement | string;
 }
 export interface TransitionParamTypes {