flowbite-svelte 0.9.5 → 0.9.6

package/cards/CtaCard.svelte

@@ -2,6 +2,7 @@
 export let title = 'Work fast from anywhere';
 export let headColor = 'gray';
 export let btns;
+export let divClass = 'p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
 let headClass;
 if (headColor === 'blue') {
     headClass = 'mb-2 text-3xl font-bold text-blue-900 dark:text-white';
@@ -32,9 +33,7 @@ else {
 }
 </script>
 
-<div
-	class="p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700"
->
+<div class={divClass}>
 	<h3 class={headClass}>
 		{title}
 	</h3>

package/cards/CtaCard.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         title?: string;
         headColor?: Colors;
         btns: CardButtonType[];
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/EcommerceCard.svelte

@@ -8,6 +8,7 @@ export let rel = '';
 export let title = 'Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport';
 export let stars = 5;
 export let price = '$555';
+export let divClass = 'max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700';
 let spanClass;
 let linkClass;
 if (btnColor === 'blue') {
@@ -66,7 +67,7 @@ else {
 }
 </script>
 
-<div class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+<div class={divClass}>
 	<a href={link} {rel}>
 		<img class="p-8 rounded-t-lg" src={img.src} alt={img.alt} />
 	</a>

package/cards/EcommerceCard.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         title?: string;
         stars?: number;
         price?: string;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/HorizontalCard.svelte

@@ -3,23 +3,20 @@ export let rel = '';
 export let img = '/images/image-4.jpeg';
 export let alt = '';
 export let header = 'Lorem ipsum dolor sit ametit.';
+export let linkClass = 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700';
+export let imgClass = 'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg';
+export let textClass = 'flex flex-col justify-between p-4 leading-normal';
+export let h3Class = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
+export let pClass = 'mb-3 font-normal text-gray-700 dark:text-gray-400';
 </script>
 
-<a
-	href={link}
-	{rel}
-	class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
->
-	<img
-		class="object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
-		src={img}
-		{alt}
-	/>
-	<div class="flex flex-col justify-between p-4 leading-normal">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+<a href={link} {rel} class={linkClass}>
+	<img class={imgClass} src={img} {alt} />
+	<div class={textClass}>
+		<h3 class={h3Class}>
 			{header}
-		</h5>
-		<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+		</h3>
+		<p class={pClass}>
 			<slot />
 		</p>
 	</div>

package/cards/HorizontalCard.svelte.d.ts

@@ -6,6 +6,11 @@ declare const __propDef: {
         img?: string;
         alt?: string;
         header?: string;
+        linkClass?: string;
+        imgClass?: string;
+        textClass?: string;
+        h3Class?: string;
+        pClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/InteractiveCard.svelte

@@ -9,6 +9,7 @@ export let content = 'Proin efficitur purus felis.';
 export let buttonColor = 'blue';
 export let link1;
 export let link2;
+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 linkClass;
 if (buttonColor === 'blue') {
     linkClass =
@@ -48,9 +49,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}>
 	<div class="flex justify-end px-4 pt-4">
 		<button
 			id="dropdownButton"

package/cards/InteractiveCard.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         buttonColor?: string;
         link1: LinkType;
         link2: LinkType;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/ListCard.svelte

@@ -1,11 +1,10 @@
 <script >export let lists;
 export let title = 'Latest Customers';
 export let action;
+export let divClass = 'p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
 </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"
->
+<div class={divClass}>
 	<div class="flex justify-between items-center mb-4">
 		<h3 class="text-xl font-bold leading-none text-gray-900 dark:text-white">
 			{title}

package/cards/ListCard.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         lists: ListCardType[];
         title?: string;
         action: LinkType;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",