flowbite-svelte 0.10.3 → 0.10.6

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;
@@ -54,9 +55,9 @@ 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">

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;
     };

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/Fileupload.svelte

@@ -4,7 +4,7 @@ export let label = 'Upload file';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="user_avatar';
 export let inputClass = 'block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400';
 export let divClass = 'mt-1 text-sm text-gray-500 dark:text-gray-300';
-export let helper;
+export let helper = '';
 </script>
 
 <label class={labelClass} for={id}>{label}</label>

package/forms/Fileupload.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         labelClass?: string;
         inputClass?: string;
         divClass?: string;
-        helper: string;
+        helper?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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 = '';
@@ -10,7 +10,7 @@ export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size}
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
 export let disabled = false;
 export let readonly = false;
-export let helper;
+export let helper = '';
 export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 // you need to this to avoid 2-way binding
 function setType(node) {

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;
@@ -14,7 +14,7 @@ declare const __propDef: {
         labelClass?: string;
         disabled?: boolean;
         readonly?: boolean;
-        helper: string;
+        helper?: string;
         helperClass?: string;
     };
     events: {

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/forms/Textarea.svelte

@@ -6,7 +6,7 @@ export let rows = 4;
 export let placeholder = 'Leave a comment...';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400';
 export let textareaClass = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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';
-export let helper;
+export let helper = '';
 export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 </script>
 

package/forms/Textarea.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         placeholder?: string;
         labelClass?: string;
         textareaClass?: string;
-        helper: string;
+        helper?: string;
         helperClass?: string;
     };
     events: {

package/package.json

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