flowbite-svelte 0.9.2 → 0.9.5

package/buttons/Button.svelte

@@ -1,7 +1,8 @@
 <script >export let rounded = false;
 export let textSize = 'text-sm';
 export let name = 'Read more';
-export let type = 'blue';
+export let buttonType = 'blue';
+export let type = 'button';
 let paddings;
 if (textSize === 'text-xs') {
     paddings = 'py-2 px-3';
@@ -17,44 +18,44 @@ else {
 }
 let buttonClass;
 let round = rounded ? 'rounded-full' : 'rounded-lg';
-if (type === 'blue') {
+if (buttonType === '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 (type === 'blue-outline') {
+else if (buttonType === '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 (type === 'dark') {
+else if (buttonType === '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 (type === 'dark-outline') {
+else if (buttonType === '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 (type === 'light') {
+else if (buttonType === '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 (type === 'green') {
+else if (buttonType === '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 (type === 'green-outline') {
+else if (buttonType === '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 (type === 'red') {
+else if (buttonType === '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 (type === 'red-outline') {
+else if (buttonType === '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 (type === 'yellow') {
+else if (buttonType === '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 (type === 'yellow-outline') {
+else if (buttonType === '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 (type === 'purple') {
+else if (buttonType === '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 (type === 'purple-outline') {
+else if (buttonType === '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 {
@@ -63,4 +64,4 @@ else {
 }
 </script>
 
-<button type="button" class={buttonClass} on:click>{name}</button>
+<button {type} class={buttonClass} on:click>{name}</button>

package/buttons/Button.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Buttontypes, Textsize } from '../types';
+import type { Buttontypes, ButtonType, Textsize } from '../types';
 declare const __propDef: {
     props: {
         rounded?: boolean;
         textSize?: Textsize;
         name?: string;
-        type?: Buttontypes;
+        buttonType?: Buttontypes;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;

package/buttons/ColorShadowButton.svelte

@@ -2,6 +2,7 @@
 export let color = 'blue';
 export let name = 'Read more';
 let btnClass;
+export let type = 'button';
 if (color === 'blue') {
     btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
 }
@@ -31,4 +32,4 @@ else {
 }
 </script>
 
-<button type="button" class={btnClass} on:click>{name}</button>
+<button {type} class={btnClass} on:click>{name}</button>

package/buttons/ColorShadowButton.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Buttonshadows, Textsize } from '../types';
+import type { Buttonshadows, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
         textSize?: Textsize;
         color?: Buttonshadows;
         name?: string;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;

package/buttons/GradientDuotoneButton.svelte

@@ -2,6 +2,7 @@
 export let color = 'purple2blue';
 export let name = 'Read more';
 let btnClass;
+export let type = 'button';
 if (color === 'purple2blue') {
     btnClass = `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
 }
@@ -28,4 +29,4 @@ else {
 }
 </script>
 
-<button type="button" class={btnClass} on:click>{name}</button>
+<button {type} class={btnClass} on:click>{name}</button>

package/buttons/GradientDuotoneButton.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Gradientduotones, Textsize } from '../types';
+import type { Gradientduotones, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
         textSize?: Textsize;
         color?: Gradientduotones;
         name?: string;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;

package/buttons/GradientMonochromeButton.svelte

@@ -2,6 +2,7 @@
 export let color = 'blue';
 export let name = 'Read more';
 let btnClass;
+export let type = 'button';
 if (color === 'blue') {
     btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
 }
@@ -31,4 +32,4 @@ else {
 }
 </script>
 
-<button type="button" class={btnClass} on:click>{name}</button>
+<button {type} class={btnClass} on:click>{name}</button>

package/buttons/GradientMonochromeButton.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Buttonshadows, Textsize } from '../types';
+import type { Buttonshadows, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
         textSize?: Textsize;
         color?: Buttonshadows;
         name?: string;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;

package/buttons/GradientOutlineButton.svelte

@@ -1,6 +1,7 @@
 <script >export let textSize = 'text-sm';
 export let color = 'purple2blue';
 export let name = 'Read more';
+export let type = 'button';
 let btnClass;
 let spanClass;
 if (color === 'purple2blue') {
@@ -45,6 +46,6 @@ else {
 }
 </script>
 
-<button class={btnClass}>
+<button class={btnClass} {type}>
 	<span class={spanClass} on:click>{name}</span>
 </button>

package/buttons/GradientOutlineButton.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Gradientduotones, Textsize } from '../types';
+import type { Gradientduotones, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
         textSize?: Textsize;
         color?: Gradientduotones;
         name?: string;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;

package/cards/Card.svelte

@@ -1,10 +1,11 @@
-<script >export let link;
-export let rel;
-export let alt;
-export let img;
+<script >export let link = '';
+export let rel = '';
+export let alt = '';
+export let img = '';
 export let btnLabel = 'Read more';
 export let btnColor = 'blue';
 export let header = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
 let buttonClass;
 if (btnColor === 'blue') {
     buttonClass =
@@ -44,9 +45,7 @@ else {
 }
 </script>
 
-<div
-	class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
->
+<div class={divClass}>
 	{#if img}
 		<a href={link} {rel}>
 			<img class="rounded-t-lg" src={img} {alt} />

package/cards/Card.svelte.d.ts

@@ -2,13 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        link: string;
-        rel: string;
-        alt: string;
-        img: string;
+        link?: string;
+        rel?: string;
+        alt?: string;
+        img?: string;
         btnLabel?: string;
         btnColor?: Colors;
         header?: string;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/CtaCard.svelte

@@ -43,8 +43,8 @@ else {
 	</p>
 	<div class="justify-center items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
 		{#if btns}
-			{#each btns as { name, textSize, type, link, rel, rounded }}
-				<a href={link} {rel}>
+			{#each btns as { name, textSize, type, href, rel, rounded }}
+				<a {href} {rel}>
 					<Button {name} {rounded} {type} {textSize} />
 				</a>
 			{/each}

package/cards/EcommerceCard.svelte

@@ -4,7 +4,7 @@
 };
 export let link = '/';
 export let btnColor = 'blue';
-export let rel;
+export let rel = '';
 export let title = 'Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport';
 export let stars = 5;
 export let price = '$555';

package/cards/EcommerceCard.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         img?: ImgType;
         link?: string;
         btnColor?: Colors;
-        rel: string;
+        rel?: string;
         title?: string;
         stars?: number;
         price?: string;

package/cards/HorizontalCard.svelte

@@ -1,7 +1,7 @@
-<script >export let link;
-export let rel;
+<script >export let link = '';
+export let rel = '';
 export let img = '/images/image-4.jpeg';
-export let alt;
+export let alt = '';
 export let header = 'Lorem ipsum dolor sit ametit.';
 </script>
 

package/cards/HorizontalCard.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        link: string;
-        rel: string;
+        link?: string;
+        rel?: string;
         img?: string;
-        alt: string;
+        alt?: string;
         header?: string;
     };
     events: {

package/cards/InteractiveCard.svelte

@@ -76,13 +76,13 @@ else {
 			class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute"
 		>
 			<ul class="py-1" aria-labelledby="dropdownButton">
-				{#each dropdownLinks as { href, label, rel }}
+				{#each dropdownLinks as { href, name, rel }}
 					<li>
 						<a
 							{href}
 							{rel}
 							class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-							>{label}</a
+							>{name}</a
 						>
 					</li>
 				{/each}
@@ -97,12 +97,12 @@ else {
 		</h3>
 		<span class="text-sm text-gray-500 dark:text-gray-400">{content}</span>
 		<div class="flex mt-4 space-x-3 lg:mt-6">
-			{#if link1.link}
-				<a href={link1.link} rel={link1.rel} class={linkClass}>{link1.name}</a>
+			{#if link1.href}
+				<a href={link1.href} rel={link1.rel} class={linkClass}>{link1.name}</a>
 			{/if}
-			{#if link2.link}
+			{#if link2.href}
 				<a
-					href={link2.link}
+					href={link2.href}
 					rel={link2.rel}
 					class="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800"
 					>{link2.name}</a

package/cards/InteractiveCard.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DropdownLinkType, ImgType, LinkType } from '../types';
+import type { LinkType, ImgType } from '../types';
 declare const __propDef: {
     props: {
-        dropdownLinks: DropdownLinkType[];
+        dropdownLinks: LinkType[];
         img: ImgType;
         header?: string;
         content?: string;

package/cards/ListCard.svelte

@@ -1,82 +1,47 @@
-<script>
-  export let lists = [
-    {
-      img: {
-        src: "/images/profile-picture-1.jpeg",
-        alt: "Neil Sims",
-      },
-      field1: "Neil Sims",
-      field2: "email@windster.com",
-      field3: "Advisor",
-    },
-    {
-      img: {
-        src: "/images/profile-picture-2.jpeg",
-        alt: "Bonnie Green",
-      },
-      field1: "Bonnie Green",
-      field2: "email@windster.com",
-      field3: "Developer",
-    },
-    {
-      img: {
-        src: "/images/profile-picture-3.jpeg",
-        alt: "Michael Gough",
-      },
-      field1: "Michael Gough",
-      field2: "email@windster.com",
-      field3: "Marketing",
-    },
-  ];
-  export let title = "Latest Customers";
-  export let action = {
-    link: "/#",
-    title: "View all",
-    rel: "",
-  };
+<script >export let lists;
+export let title = 'Latest Customers';
+export let action;
 </script>
 
 <div
-  class="p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700"
+	class="p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700"
 >
-  <div class="flex justify-between items-center mb-4">
-    <h3 class="text-xl font-bold leading-none text-gray-900 dark:text-white">
-      {title}
-    </h3>
-    <a
-      href={action.link}
-      rel={action.rel}
-      class="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-    >
-      {action.title}
-    </a>
-  </div>
-  <div class="flow-root">
-    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
-      {#each lists as { img, field1, field2, field3 }}
-        <li class="py-3 sm:py-4">
-          <div class="flex items-center space-x-4">
-            <div class="flex-shrink-0">
-              <img class="w-8 h-8 rounded-full" src={img.src} alt={img.alt} />
-            </div>
-            <div class="flex-1 min-w-0">
-              <p
-                class="text-sm font-medium text-gray-900 truncate dark:text-white"
-              >
-                {field1}
-              </p>
-              <p class="text-sm text-gray-500 truncate dark:text-gray-400">
-                {field2}
-              </p>
-            </div>
-            <div
-              class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white"
-            >
-              {field3}
-            </div>
-          </div>
-        </li>
-      {/each}
-    </ul>
-  </div>
+	<div class="flex justify-between items-center mb-4">
+		<h3 class="text-xl font-bold leading-none text-gray-900 dark:text-white">
+			{title}
+		</h3>
+		<a
+			href={action.href}
+			rel={action.rel}
+			class="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+		>
+			{action.name}
+		</a>
+	</div>
+	<div class="flow-root">
+		<ul class="divide-y divide-gray-200 dark:divide-gray-700">
+			{#each lists as { img, field1, field2, field3 }}
+				<li class="py-3 sm:py-4">
+					<div class="flex items-center space-x-4">
+						<div class="flex-shrink-0">
+							<img class="w-8 h-8 rounded-full" src={img.src} alt={img.alt} />
+						</div>
+						<div class="flex-1 min-w-0">
+							<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
+								{field1}
+							</p>
+							<p class="text-sm text-gray-500 truncate dark:text-gray-400">
+								{field2}
+							</p>
+						</div>
+						<div
+							class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white"
+						>
+							{field3}
+						</div>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	</div>
 </div>

package/cards/ListCard.svelte.d.ts

@@ -1,51 +1,19 @@
-/** @typedef {typeof __propDef.props}  ListCardProps */
-/** @typedef {typeof __propDef.events}  ListCardEvents */
-/** @typedef {typeof __propDef.slots}  ListCardSlots */
-export default class ListCard extends SvelteComponentTyped<{
-    lists?: {
-        img: {
-            src: string;
-            alt: string;
-        };
-        field1: string;
-        field2: string;
-        field3: string;
-    }[];
-    title?: string;
-    action?: {
-        link: string;
-        title: string;
-        rel: string;
-    };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ListCardProps = typeof __propDef.props;
-export type ListCardEvents = typeof __propDef.events;
-export type ListCardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { LinkType, ListCardType } from '../types';
 declare const __propDef: {
     props: {
-        lists?: {
-            img: {
-                src: string;
-                alt: string;
-            };
-            field1: string;
-            field2: string;
-            field3: string;
-        }[];
+        lists: ListCardType[];
         title?: string;
-        action?: {
-            link: string;
-            title: string;
-            rel: string;
-        };
+        action: LinkType;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type ListCardProps = typeof __propDef.props;
+export declare type ListCardEvents = typeof __propDef.events;
+export declare type ListCardSlots = typeof __propDef.slots;
+export default class ListCard extends SvelteComponentTyped<ListCardProps, ListCardEvents, ListCardSlots> {
+}
 export {};