flowbite-svelte 0.10.4 → 0.10.7

package/cards/Card.svelte

@@ -4,6 +4,7 @@ export let alt = '';
 export let img = '';
 export let btnLabel = 'Read more';
 export let btnColor = 'blue';
+export let headerClass = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
 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;
@@ -45,7 +46,7 @@ else {
 }
 </script>
 
-<div class={divClass}>
+<div class={divClass} class:has-paragraph={$$slots.paragraph}>
 	{#if img}
 		<a href={link} {rel}>
 			<img class="rounded-t-lg" src={img} {alt} />
@@ -54,19 +55,20 @@ else {
 	<div class="p-5">
 		{#if link}
 			<a href={link} {rel}>
-				<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+				<h3 class={headerClass}>
 					{header}
-				</h5>
+				</h3>
 			</a>
 		{:else}
-			<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+			<h3 class={headerClass}>
 				{header}
-			</h5>
+			</h3>
+		{/if}
+		{#if $$slots.paragraph}
+			<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+				<slot name="paragraph" />
+			</p>
 		{/if}
-
-		<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
-			<slot />
-		</p>
 		{#if link}
 			<a href={link} {rel} class={buttonClass}>
 				{btnLabel}

package/cards/Card.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         img?: string;
         btnLabel?: string;
         btnColor?: Colors;
+        headerClass?: string;
         header?: string;
         divClass?: string;
     };
@@ -15,7 +16,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        paragraph: {};
     };
 };
 export declare type CardProps = typeof __propDef.props;

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 headerClass = 'text-xl font-semibold tracking-tight text-gray-900 dark:text-white';
 export let divClass = 'max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700';
 let spanClass;
 let linkClass;
@@ -73,7 +74,7 @@ else {
 	</a>
 	<div class="px-5 pb-5">
 		<a href={link} {rel}>
-			<h3 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
+			<h3 class={headerClass}>
 				{title}
 			</h3>
 		</a>

package/cards/EcommerceCard.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         title?: string;
         stars?: number;
         price?: string;
+        headerClass?: string;
         divClass?: string;
     };
     events: {

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 headerClass = 'mb-1 text-xl font-medium text-gray-900 dark:text-white';
 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') {
@@ -91,7 +92,7 @@ else {
 
 	<div class="flex flex-col items-center pb-10">
 		<img class="mb-3 w-24 h-24 rounded-full shadow-lg" src={img.src} alt={img.alt} />
-		<h3 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
+		<h3 class={headerClass}>
 			{header}
 		</h3>
 		<span class="text-sm text-gray-500 dark:text-gray-400">{content}</span>

package/cards/InteractiveCard.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         buttonColor?: string;
         link1: LinkType;
         link2: LinkType;
+        headerClass?: string;
         divClass?: string;
     };
     events: {

package/forms/FloatingLabelInput.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         id: string;
-        type: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+        type: "number" | "search" | "button" | "submit" | "reset" | "text" | "email" | "password" | "hidden" | "checkbox" | "color" | "date" | "datetime-local" | "file" | "image" | "month" | "radio" | "range" | "tel" | "time" | "url" | "week";
         value?: string;
         name?: string;
         label?: string;

package/forms/Iconinput.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         label: string;
         id: string;
-        type: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+        type: "number" | "search" | "button" | "submit" | "reset" | "text" | "email" | "password" | "hidden" | "checkbox" | "color" | "date" | "datetime-local" | "file" | "image" | "month" | "radio" | "range" | "tel" | "time" | "url" | "week";
         value?: string;
         icon: typeof SvelteComponent;
         helper?: string;

package/forms/Input.svelte

@@ -1,4 +1,4 @@
-<script >export let type;
+<script >export let type = 'text';
 export let value = '';
 export let name = '';
 export let id = '';

package/forms/Input.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        type: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+        type?: "number" | "search" | "button" | "submit" | "reset" | "text" | "email" | "password" | "hidden" | "checkbox" | "color" | "date" | "datetime-local" | "file" | "image" | "month" | "radio" | "range" | "tel" | "time" | "url" | "week";
         value?: string;
         name?: string;
         id?: string;

package/forms/Select.svelte

@@ -1,7 +1,7 @@
 <script >export let value;
-export let id = 'countries';
-export let name = 'country';
-export let label = 'Select your country';
+export let id = '';
+export let name = '';
+export let label = '';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400';
 export let selectClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 </script>

package/package.json

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