flowbite-svelte 0.12.3 → 0.13.1

package/cards/InteractiveCard.svelte.d.ts

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

package/cards/ListCard.svelte

@@ -9,11 +9,7 @@ export let divClass = 'p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8
 		<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"
-		>
+		<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>
@@ -33,9 +29,7 @@ export let divClass = 'p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8
 								{field2}
 							</p>
 						</div>
-						<div
-							class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white"
-						>
+						<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
 							{field3}
 						</div>
 					</div>

package/cards/SignInCard.svelte

@@ -10,101 +10,58 @@ let password;
 let error;
 let submitClass;
 if (btnSignInColor === 'blue') {
-    submitClass =
-        'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    submitClass = 'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 else if (btnSignInColor === 'gray') {
-    submitClass =
-        'w-full text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+    submitClass = 'w-full text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 }
 else if (btnSignInColor === 'red') {
-    submitClass =
-        'w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+    submitClass = 'w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
 }
 else if (btnSignInColor === 'yellow') {
-    submitClass =
-        'w-full text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+    submitClass = 'w-full text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
 }
 else if (btnSignInColor === 'green') {
-    submitClass =
-        'w-full text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+    submitClass = 'w-full text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
 }
 else if (btnSignInColor === 'indigo') {
-    submitClass =
-        'w-full text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+    submitClass = 'w-full text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
 }
 else if (btnSignInColor === 'purple') {
-    submitClass =
-        'w-full text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+    submitClass = 'w-full text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
 }
 else if (btnSignInColor === 'pink') {
-    submitClass =
-        'w-full text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+    submitClass = 'w-full text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
 }
 else {
-    submitClass =
-        'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    submitClass = 'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 </script>
 
-<div
-	class="p-4 max-w-sm w-full bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700"
->
+<div class="p-4 max-w-sm w-full bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700">
 	<form class="space-y-6" on:submit|preventDefault={login}>
 		<h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
 		<div>
-			<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-				>Email</label
-			>
-			<input
-				type="email"
-				name="email"
-				id="email"
-				bind:value={email}
-				class="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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
-				placeholder="name@company.com"
-				required
-			/>
+			<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email</label>
+			<input type="email" name="email" id="email" bind:value={email} class="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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
 		</div>
 		<div>
-			<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-				>Your password</label
-			>
-			<input
-				type="password"
-				name="password"
-				id="password"
-				placeholder="••••••••"
-				bind:value={password}
-				class="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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
-				required
-			/>
+			<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your password</label>
+			<input type="password" name="password" id="password" placeholder="••••••••" bind:value={password} class="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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
 		</div>
 		<div class="flex items-start">
 			{#if rememberMe}
 				<div class="flex items-start">
 					<div class="flex items-center h-5">
-						<input
-							id="remember"
-							aria-describedby="remember"
-							type="checkbox"
-							class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
-						/>
+						<input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" />
 					</div>
 					<div class="ml-3 text-sm">
-						<label for="remember" class="font-medium text-gray-900 dark:text-gray-300"
-							>Remember me</label
-						>
+						<label for="remember" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
 					</div>
 				</div>
 			{/if}
 			{#if lostPassword}
-				<a
-					href={lostPassword.href}
-					rel={lostPassword.rel}
-					class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500"
-					>{lostPassword.name}</a
-				>
+				<a href={lostPassword.href} rel={lostPassword.rel} class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500">{lostPassword.name}</a>
 			{/if}
 		</div>
 		{#if error}
@@ -117,11 +74,7 @@ else {
 		<button type="submit" class={submitClass}>Login to your account</button>
 		{#if signup}
 			<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
-				Not registered? <a
-					href={signup.href}
-					rel={signup.rel}
-					class="text-blue-700 hover:underline dark:text-blue-500">{signup.name}</a
-				>
+				Not registered? <a href={signup.href} rel={signup.rel} class="text-blue-700 hover:underline dark:text-blue-500">{signup.name}</a>
 			</div>
 		{/if}
 	</form>

package/cards/SignInCard.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AuthFunctionType, LinkType } from '../types';
+import type { AuthFunctionType, LinkType, Colors } from '../types';
 declare const __propDef: {
     props: {
         login: AuthFunctionType;
         title?: string;
-        btnSignInColor?: string;
+        btnSignInColor?: Colors;
         rememberMe?: boolean;
         signup: LinkType;
         lostPassword: LinkType;

package/darkmode/DarkMode.svelte

@@ -21,9 +21,7 @@ const toggleTheme = () => {
 onMount(() => {
     let themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
     let themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
-    if (localStorage.getItem('color-theme') === 'dark' ||
-        (!('color-theme' in localStorage) &&
-            window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
         document.documentElement.classList.add('dark');
         themeToggleDarkIcon.classList.add('hidden');
     }
@@ -34,32 +32,10 @@ onMount(() => {
 });
 </script>
 
-<button
-	on:click={toggleTheme}
-	aria-label="Dark mode"
-	id="theme-toggle"
-	type="button"
-	class={btnClass}
->
-	<svg
-		class:hidden={mode === 'light'}
-		on:click={() => (mode = 'dark')}
-		id="theme-toggle-dark-icon"
-		class="hidden w-5 h-5"
-		fill="currentColor"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-		><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
-	>
+<button on:click={toggleTheme} aria-label="Dark mode" id="theme-toggle" type="button" class={btnClass}>
+	<svg class:hidden={mode === 'light'} on:click={() => (mode = 'dark')} id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg>
 
-	<svg
-		class:hidden={mode === 'dark'}
-		on:click={() => (mode = 'light')}
-		id="theme-toggle-light-icon"
-		class="hidden w-5 h-5"
-		fill="currentColor"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
+	<svg class:hidden={mode === 'dark'} on:click={() => (mode = 'light')} id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
 		><path
 			d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
 			fill-rule="evenodd"

package/dropdowns/DropdownDefault.svelte

@@ -30,8 +30,7 @@ else if (color === 'blue-outline') {
     buttonClass = `inline-flex items-center 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 (color === 'dark') {
-    buttonClass =
-        buttonClass = `inline-flex items-center 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`;
+    buttonClass = buttonClass = `inline-flex items-center 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 (color === 'dark-outline') {
     buttonClass = `inline-flex items-center 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`;
@@ -71,20 +70,10 @@ else {
 
 <button on:click={handleToggle} class={buttonClass} type="button"
 	>{label}
-	<svg
-		class="ml-2 w-4 h-4"
-		fill="none"
-		stroke="currentColor"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-		><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-	</svg>
+	<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg>
 </button>
 
-<div
-	class:hidden={toggleHidden}
-	class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
->
+<div class:hidden={toggleHidden} class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700">
 	{#if $$slots.header}
 		<div class="py-3 px-4 text-gray-900 dark:text-white">
 			<slot name="header" />
@@ -92,16 +81,8 @@ else {
 	{/if}
 	<ul class="py-1" aria-labelledby="dropdownButton">
 		{#each items as { href, name, divider }}
-			<li
-				class:border-b={divider}
-				class:border-gray-100={divider}
-				class:dark:border-gray-500={divider}
-			>
-				<a
-					{href}
-					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"
-					>{name}</a
-				>
+			<li class:border-b={divider} class:border-gray-100={divider} class:dark:border-gray-500={divider}>
+				<a {href} 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">{name}</a>
 			</li>
 		{/each}
 	</ul>

package/dropdowns/DropdownDefault.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DropdownType } from '../types';
+import type { DropdownType, Colors } from '../types';
 declare const __propDef: {
     props: {
         label?: string;
         rounded?: boolean;
         textSize?: string;
-        color?: string;
+        color?: Colors;
         items: DropdownType[];
     };
     events: {

package/footer/SitemapFooter.svelte

@@ -33,9 +33,7 @@ export let allRightsReserved = 'All Rights Reserved.';
 		{/each}
 	</div>
 	<div class={copyrightDivClass}>
-		<span class={copyrightClass}
-			>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved}
-		</span>
+		<span class={copyrightClass}>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved} </span>
 		<div class={socialMediaDivClass}>
 			{#each socialMedia as { href, icon }}
 				<a {href} class={socialMediaLinkClass}>

package/forms/Checkbox.svelte

@@ -12,14 +12,7 @@ export let options;
 		{#if option.helper}
 			<div class="flex mb-4">
 				<div class="flex items-center h-5">
-					<input
-						id={option.id}
-						aria-describedby={option.id}
-						type="checkbox"
-						class={inputClass}
-						bind:checked={option.checked}
-						disabled={option.disabled}
-					/>
+					<input id={option.id} aria-describedby={option.id} type="checkbox" class={inputClass} bind:checked={option.checked} disabled={option.disabled} />
 				</div>
 				<div class="ml-3 text-sm">
 					<label for={option.id} class={helperLabelClass}>{option.label}</label>
@@ -32,14 +25,7 @@ export let options;
 			</div>
 		{:else}
 			<div class={divClass}>
-				<input
-					id={option.id}
-					aria-describedby={option.id}
-					type="checkbox"
-					class={inputClass}
-					checked={option.checked}
-					disabled={option.disabled}
-				/>
+				<input id={option.id} aria-describedby={option.id} type="checkbox" class={inputClass} checked={option.checked} disabled={option.disabled} />
 				<label for={option.id} class={labelClass}>{option.label}</label>
 			</div>
 		{/if}

package/forms/Checkbox.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { CheckboxType } from '../types';
 declare const __propDef: {
     props: {
         legend?: string;
@@ -6,13 +7,7 @@ declare const __propDef: {
         inputClass?: string;
         labelClass?: string;
         helperLabelClass?: string;
-        options: {
-            id: string;
-            label: string;
-            checked?: boolean;
-            disabled?: boolean;
-            helper?: string;
-        }[];
+        options: CheckboxType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/FloatingLabelInput.svelte

@@ -1,4 +1,5 @@
-<script >export let id;
+<script >import generateId from '../utils/generateId.js';
+export let id = generateId();
 export let type;
 export let value = '';
 export let name = '';

package/forms/FloatingLabelInput.svelte.d.ts

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

package/forms/Iconinput.svelte

@@ -1,5 +1,6 @@
-<script >export let label;
-export let id;
+<script >import generateId from '../utils/generateId.js';
+export let label;
+export let id = generateId();
 export let type;
 export let value = '';
 export let icon;

package/forms/Iconinput.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { InputType } from '../types';
 import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
         label: string;
-        id: string;
-        type: "number" | "search" | "button" | "submit" | "reset" | "text" | "email" | "password" | "hidden" | "checkbox" | "color" | "date" | "datetime-local" | "file" | "image" | "month" | "radio" | "range" | "tel" | "time" | "url" | "week";
+        id?: string;
+        type: InputType;
         value?: string;
         icon: typeof SvelteComponent;
         helper?: string;

package/forms/Input.svelte

@@ -1,7 +1,8 @@
-<script >export let type = 'text';
+<script >import generateId from '../utils/generateId.js';
+export let type = 'text';
 export let value = '';
 export let name = '';
-export let id = '';
+export let id = generateId();
 export let label = '';
 export let required = false;
 export let placeholder = '';
@@ -20,17 +21,7 @@ function setType(node) {
 
 <div class={$$props.class}>
 	<label for={id} class={labelClass}>{label}</label>
-	<input
-		bind:value
-		{name}
-		use:setType
-		{id}
-		class={inputClass}
-		{placeholder}
-		{required}
-		{disabled}
-		{readonly}
-	/>
+	<input bind:value {name} use:setType {id} class={inputClass} {placeholder} {required} {disabled} {readonly} />
 	{#if helper}
 		<p class={helperClass}>{@html helper}</p>
 	{/if}

package/forms/Input.svelte.d.ts

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

package/forms/Radio.svelte

@@ -3,42 +3,14 @@ export let divClass = 'flex items-center mb-4';
 export let inputClass = 'w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600';
 export let labelClass = 'block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
 export let name = 'countries';
-export let options = [
-    {
-        id: 'country-option-1',
-        value: 'USA',
-        checked: true,
-        label: 'United States'
-    },
-    {
-        id: 'country-option-2',
-        label: 'Germany',
-        value: 'Germany'
-    },
-    {
-        id: 'country-option-3',
-        label: 'Spain',
-        value: 'Spain',
-        disabled: true
-    }
-];
+export let options;
 </script>
 
 <fieldset>
 	<legend class="sr-only">{legend}</legend>
 	{#each options as option}
 		<div class={divClass}>
-			<input
-				id={option.id}
-				type="radio"
-				{name}
-				value={option.value}
-				class={inputClass}
-				aria-labelledby={option.id}
-				aria-describedby={option.id}
-				checked={option.checked}
-				disabled={option.disabled}
-			/>
+			<input id={option.id} type="radio" {name} value={option.value} class={inputClass} aria-labelledby={option.id} aria-describedby={option.id} checked={option.checked} disabled={option.disabled} />
 			<label for={option.id} class={labelClass}>
 				{option.label}
 			</label>

package/forms/Radio.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { RadioType } from '../types';
 declare const __propDef: {
     props: {
         legend?: string;
@@ -6,13 +7,7 @@ declare const __propDef: {
         inputClass?: string;
         labelClass?: string;
         name?: string;
-        options?: {
-            id: string;
-            label: string;
-            value: string;
-            checked?: boolean;
-            disabled?: boolean;
-        }[];
+        options: RadioType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Select.svelte

@@ -1,12 +1,13 @@
-<script >export let value;
-export let id = '';
+<script >import generateId from '../utils/generateId.js';
+export let value;
+export let id = generateId();
 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>
 
-<label for="countries" class={labelClass}>{label}</label>
+<label for={id} class={labelClass}>{label}</label>
 <select bind:value {id} {name} class={selectClass}>
 	<slot />
 </select>

package/forms/SingleCheckbox.svelte

@@ -1,5 +1,6 @@
-<script >export let checked = false;
-export let id;
+<script >import generateId from '../utils/generateId.js';
+export let checked = false;
+export let id = generateId();
 export let required = false;
 export let label;
 export let name;
@@ -9,15 +10,7 @@ export let labelClass = 'font-medium text-gray-900 dark:text-gray-300';
 
 <div class="flex items-start">
 	<div class="flex items-center h-5">
-		<input
-			bind:checked
-			{id}
-			aria-describedby={id}
-			{name}
-			type="checkbox"
-			class={inputClass}
-			{required}
-		/>
+		<input bind:checked {id} aria-describedby={id} {name} type="checkbox" class={inputClass} {required} />
 	</div>
 	<div class="ml-3 text-sm">
 		<label for={id} class={labelClass}>{label}</label>

package/forms/SingleCheckbox.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         checked?: boolean;
-        id: string;
+        id?: string;
         required?: boolean;
         label: string;
         name: string;

package/forms/Textarea.svelte

@@ -1,5 +1,6 @@
-<script >export let value = '';
-export let id = 'message';
+<script >import generateId from '../utils/generateId.js';
+export let value = '';
+export let id = generateId();
 export let name = 'message';
 export let label = 'Your message';
 export let rows = 4;

package/forms/Toggle.svelte

@@ -1,5 +1,6 @@
-<script >export let name = 'toggle-example';
-export let id = 'toggle-example';
+<script >import generateId from '../utils/generateId.js';
+export let name = 'toggle-example';
+export let id = generateId();
 export let label = 'Toggle me';
 export let checked = false;
 export let disabled = false;
@@ -8,8 +9,8 @@ export let divClass = 'w-11 h-6 bg-gray-200 rounded-full border border-gray-200
 export let spanClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
 </script>
 
-<label for={name} class={labelClass}>
-	<input type="checkbox" {id} class="sr-only" {checked} {disabled} />
+<label for={id} class={labelClass}>
+	<input type="checkbox" {id} class="sr-only" {checked} {name} {disabled} />
 	<div class={divClass} />
 	<span class={spanClass}>{label}</span>
 </label>

package/index.d.ts

@@ -56,9 +56,12 @@ export { default as Pagination } from "./paginations/Pagination.svelte";
 export { default as Previous } from "./paginations/Previous.svelte";
 export { default as Next } from "./paginations/Next.svelte";
 export { default as TableData } from "./paginations/TableData.svelte";
+export { default as Progressbar } from "./progressbars/Progressbar.svelte";
 export { default as Sidebar } from "./sidebars/Sidebar.svelte";
 export { default as Spinner } from "./spinners/Spinner.svelte";
 export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
+export { default as Table } from "./tables/Table.svelte";
+export { default as TableDefaultRow } from "./tables/TableDefaultRow.svelte";
 export { default as InteractiveTabHead } from "./tabs/InteractiveTabHead.svelte";
 export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
 export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";