flowbite-svelte 0.14.14 → 0.15.0

package/ratings/Rating.svelte

@@ -1,4 +1,4 @@
-<script >import { StarIconSolid } from '@codewithshin/svelte-heroicons';
+<script>import { StarIconSolid } from '@codewithshin/svelte-heroicons';
 export let divClass = 'flex items-center';
 export let total = 5;
 export let rating = 4;
@@ -11,12 +11,12 @@ let grayStars = total - roundedRating;
 <div class={divClass}>
 	{#each Array(roundedRating) as _, star}
 		<slot name="ratingUp">
-			<StarIconSolid className="h-5 w-5 text-yellow-300 dark:text-yellow-200" />
+			<StarIconSolid class="text-yellow-300 dark:text-yellow-200" />
 		</slot>
 	{/each}
 	{#each Array(grayStars) as _, star}
 		<slot name="ratingDown">
-			<StarIconSolid className="h-5 w-5 text-gray-300 dark:text-gray-500" />
+			<StarIconSolid class="text-gray-300 dark:text-gray-500" />
 		</slot>
 	{/each}
 	{#if $$slots.text}

package/ratings/RatingComment.svelte

@@ -1,4 +1,4 @@
-<script >export let comment;
+<script>export let comment;
 </script>
 
 <article>

package/ratings/ScoreRating.svelte

@@ -1,4 +1,4 @@
-<script >export let ratings = [];
+<script>export let ratings = [];
 export let ratings2 = [];
 export let headerLabel;
 export let desc1Class = 'bg-blue-100 w-8 text-blue-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-blue-200 dark:text-blue-800';

package/sidebars/Sidebar.svelte

@@ -1,4 +1,4 @@
-<script >import SidebarDropdown from './SidebarDropdown.svelte';
+<script>import SidebarDropdown from './SidebarDropdown.svelte';
 export let site;
 export let links;
 export let cta;
@@ -9,9 +9,7 @@ export let cta;
 		{#if site}
 			<a href={site.href} class="flex items-center pl-2.5 mb-5">
 				<img src={site.img} class="h-6 mr-3 sm:h-7" alt={site.name} />
-				<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white"
-					>{site.name}</span
-				>
+				<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">{site.name}</span>
 			</a>
 		{/if}
 		<ul class="space-y-2">
@@ -20,13 +18,9 @@ export let cta;
 					<SidebarDropdown {link} />
 				{:else}
 					<li>
-						<a
-							href={link.href}
-							rel={link.rel}
-							class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-						>
+						<a href={link.href} rel={link.rel} class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
 							{#if link.icon}
-								<svelte:component this={link.icon} className="h-4 w-4 mr-2" />
+								<svelte:component this={link.icon} size={link.iconSize} class="mr-2 {link.iconClass}" />
 							{/if}
 							<span class="ml-3">{link.name}</span>
 							{#if link.subtext}
@@ -40,10 +34,7 @@ export let cta;
 		{#if cta}
 			<div id="dropdown-cta" class="p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900" role="alert">
 				<div class="flex items-center mb-3">
-					<span
-						class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900"
-						>{cta.label}</span
-					>
+					<span class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900">{cta.label}</span>
 				</div>
 				<p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
 					{cta.text}

package/sidebars/SidebarDropdown.svelte

@@ -1,4 +1,4 @@
-<script >import { slide } from 'svelte/transition';
+<script>import { slide } from 'svelte/transition';
 export let link;
 let isOpen = false;
 let activeDropdown = undefined;
@@ -9,40 +9,18 @@ const handleDropdown = (id) => {
 </script>
 
 <li>
-	<button
-		type="button"
-		on:click={() => handleDropdown(link.id)}
-		class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
-		aria-controls="dropdown"
-		data-collapse-toggle="dropdown"
-	>
+	<button type="button" on:click={() => handleDropdown(link.id)} class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown" data-collapse-toggle="dropdown">
 		{#if link.icon}
-			<svelte:component this={link.icon} className="h-4 w-4 mr-2" />
+			<svelte:component this={link.icon} class="mr-4 {link.iconClass}" size={link.iconSize} />
 		{/if}
 		<span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item="">{link.name}</span>
-		<svg
-			sidebar-toggle-item=""
-			class="w-6 h-6"
-			fill="currentColor"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				fill-rule="evenodd"
-				d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-				clip-rule="evenodd"
-			/></svg
-		>
+		<svg sidebar-toggle-item="" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
 	</button>
 	{#if isOpen && link.id == activeDropdown}
 		<ul id="dropdown" class="py-2 space-y-2" transition:slide={{ duration: 500 }}>
 			{#each link.children as child}
 				<li>
-					<a
-						href={child.href}
-						rel={child.rel}
-						class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
-						>{child.name}</a
-					>
+					<a href={child.href} rel={child.rel} class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">{child.name}</a>
 				</li>
 			{/each}
 		</ul>

package/spinners/Spinner.svelte

@@ -1,4 +1,4 @@
-<script >export let color = 'blue';
+<script>export let color = 'blue';
 export let bg = 'text-gray-200';
 export let size = 'w-8 h-8';
 export let align = 'text-center';

package/spinners/SpinnerButton.svelte

@@ -1,4 +1,4 @@
-<script >export let color;
+<script>export let color;
 let colorClass;
 let fillColor1;
 let fillColor2;

package/tables/Table.svelte

@@ -1,4 +1,4 @@
-<script >export let header;
+<script>export let header;
 export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
 export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
 export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';

package/tables/TableCheckbox.svelte

@@ -1,4 +1,4 @@
-<script >export let header;
+<script>export let header;
 export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
 export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
 export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';

package/tables/TableDefaultRow.svelte

@@ -1,4 +1,4 @@
-<script >export let items;
+<script>export let items;
 export let html = false;
 export let rowState = undefined;
 let trClass;

package/tables/TableSearch.svelte

@@ -1,4 +1,4 @@
-<script >import TableDefaultRow from './TableDefaultRow.svelte';
+<script>import TableDefaultRow from './TableDefaultRow.svelte';
 export let inputValue = '';
 export let menuItems;
 export let filteredItems = [];

package/tabs/DefaultTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let tabs;
+<script>export let tabs;
 </script>
 
 <ul class="flex flex-wrap border-b border-gray-200 dark:border-gray-700">

package/tabs/FullWidthTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let tabs;
+<script>export let tabs;
 export let tabLabel;
 </script>
 

package/tabs/IconTabs.svelte

@@ -1,13 +1,13 @@
-<script >export let tabs;
+<script>export let tabs;
 export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300';
 </script>
 
 <div class="border-b border-gray-200 dark:border-gray-700">
 	<ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
-		{#each tabs as { name, active, href, rel, icon }}
+		{#each tabs as { name, active, href, rel, icon, iconSize }}
 			<li class="mr-2">
 				<a {href} {rel} class={active ? 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group' : '  inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group '}>
-					<svelte:component this={icon} className={iconClass} />
+					<svelte:component this={icon} size={iconSize} class={iconClass} />
 					{name}
 				</a>
 			</li>

package/tabs/InteractiveTabHead.svelte

@@ -1,4 +1,4 @@
-<script >import { tabStore } from './tabStores';
+<script>import { tabStore } from './tabStores';
 export let tabs;
 export let tabId = 'myTab';
 export let activeTabValue = 1;

package/tabs/InteractiveTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let tabId = 'myTab';
+<script>export let tabId = 'myTab';
 export let activeTabValue = 1;
 const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 export let tabs;

package/tabs/PillTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let tabs;
+<script>export let tabs;
 </script>
 
 <ul class="flex flex-wrap">

package/tabs/TabContent.svelte

@@ -1,4 +1,4 @@
-<script >import { tabStore } from './tabStores';
+<script>import { tabStore } from './tabStores';
 export let divClass = 'p-4 rounded-lg dark:bg-gray-800';
 export let tab;
 let activeTabValue;

package/tabs/UnderlineTabs.svelte

@@ -1,4 +1,4 @@
-<script >export let divClass = 'text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700';
+<script>export let divClass = 'text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700';
 export let tabs;
 </script>
 

package/timelines/Activity.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/ActivityItem.svelte

@@ -1,4 +1,4 @@
-<script >export let activities;
+<script>export let activities;
 </script>
 
 {#each activities as { title, date, src, alt, text }}

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 {