flowbite-svelte 0.9.6 → 0.10.1

package/auth/ForgotPassword.svelte

@@ -1,9 +1,9 @@
 <script >import { Alert } from '../index';
-export let forgot;
-export let email;
-export let error;
-export let message;
-export let data;
+export let forgot = undefined;
+export let email = '';
+export let error = '';
+export let message = '';
+export let data = '';
 </script>
 
 <div

package/auth/ForgotPassword.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 import type { AuthFunctionType } from '../types';
 declare const __propDef: {
     props: {
-        forgot: AuthFunctionType;
-        email: string;
-        error: string;
-        message: string;
-        data: string;
+        forgot?: AuthFunctionType;
+        email?: string;
+        error?: string;
+        message?: string;
+        data?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/auth/Input.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  InputProps */
+/** @typedef {typeof __propDef.events}  InputEvents */
+/** @typedef {typeof __propDef.slots}  InputSlots */
+export default class Input extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/auth/Login.svelte

@@ -1,14 +1,14 @@
 <script >import { Alert } from '../index';
-export let login;
+export let login = undefined;
 export let title = 'Sign in';
 export let btnSignInColor = 'blue';
 export let rememberMe = false;
-export let signup;
-export let lostPassword;
-export let email;
-export let password;
-export let error;
+export let signup = undefined;
+export let lostPassword = undefined;
+export let error = '';
+export let submitText = 'Login to your account';
 let submitClass;
+export let fields;
 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';
@@ -52,41 +52,29 @@ else {
 >
 	<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
-			/>
-		</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
-			/>
-		</div>
+		{#each fields as field}
+			<div>
+				<label
+					for={field.label}
+					class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+					>{field.label}</label
+				>
+				<input
+					type={field.fieldtype}
+					name={field.label}
+					id={field.label}
+					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={field.placeholder}
+					required={field.required}
+				/>
+			</div>
+		{/each}
 		<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"
 						/>
@@ -114,7 +102,7 @@ else {
 				</Alert>
 			</div>
 		{/if}
-		<button type="submit" class={submitClass}>Login to your account</button>
+		<button type="submit" class={submitClass}>{submitText}</button>
 		{#if signup}
 			<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
 				Not registered? <a

package/auth/Login.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AuthFunctionType, LinkType } from '../types';
+import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
 declare const __propDef: {
     props: {
-        login: AuthFunctionType;
+        login?: AuthFunctionType;
         title?: string;
         btnSignInColor?: string;
         rememberMe?: boolean;
-        signup: LinkType;
-        lostPassword: LinkType;
-        email: string;
-        password: string;
-        error: string;
+        signup?: LinkType;
+        lostPassword?: LinkType;
+        error?: string;
+        submitText?: string;
+        fields: AuthFieldType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/auth/Register.svelte

@@ -1,14 +1,39 @@
 <script >import { Alert } from '../index';
-export let register;
-export let error;
-export let login;
-export let rememberMe;
-export let lostPassword;
-export let message;
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+export let register = undefined;
+export let error = '';
+export let login = undefined;
+export let rememberMe = false;
+export let lostPassword = undefined;
+export let message = '';
 // Variables bound to respective inputs via bind:value
-export let email;
-export let password;
-export let name;
+// export let email: string = 'email';
+// export let password: string = '';
+// export let name: string = '';
+//
+// export let nameField: string = 'username';
+// field names password, name, email
+export let fields = [
+    {
+        label: 'name',
+        fieldtype: 'text',
+        required: true,
+        placeholder: 'Your name'
+    },
+    {
+        label: 'email',
+        fieldtype: 'email',
+        required: true,
+        placeholder: 'Your email'
+    },
+    {
+        label: 'password',
+        fieldtype: 'password',
+        required: true,
+        placeholder: 'Your password'
+    }
+];
 </script>
 
 <div
@@ -26,45 +51,22 @@ export let name;
 			<a class="back" href="/"><i class="bi bi-arrow-left dark:text-white" /></a>
 			<h3 class="text-xl font-medium text-gray-900 dark:text-white">Register</h3>
 		</div>
-		<div>
-			<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-				>Name</label
-			>
-			<input
-				type="text"
-				required
-				name="name"
-				placeholder="Enter your name"
-				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"
-				bind:value={name}
-			/>
-		</div>
-		<div>
-			<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-				>Email</label
-			>
-			<input
-				type="email"
-				required
-				name="email"
-				placeholder="Enter your 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"
-				bind:value={email}
-			/>
-		</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"
-				required
-				name="password"
-				placeholder="Enter your 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"
-				bind:value={password}
-			/>
-		</div>
+		{#each fields as field}
+			<div>
+				<label
+					for={field.label}
+					class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+					>{field.label}</label
+				>
+				<input
+					type={field.fieldtype}
+					required={field.required}
+					name={field.label}
+					placeholder={field.placeholder}
+					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"
+				/>
+			</div>
+		{/each}
 		{#if error}
 			<div class="mt-6">
 				<Alert alertId="alert-green" color="red" closeBtn>

package/auth/Register.svelte.d.ts

@@ -1,16 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AuthFunctionType, LinkType } from '../types';
+import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
 declare const __propDef: {
     props: {
-        register: AuthFunctionType;
-        error: string;
-        login: LinkType;
-        rememberMe: boolean;
-        lostPassword: LinkType;
-        message: string;
-        email: string;
-        password: string;
-        name: string;
+        register?: AuthFunctionType;
+        error?: string;
+        login?: LinkType;
+        rememberMe?: boolean;
+        lostPassword?: LinkType;
+        message?: string;
+        fields?: AuthFieldType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/auth/Reset.svelte

@@ -1,10 +1,10 @@
 <script >import { Alert } from '../index';
-export let resetpw;
-export let password;
-export let email;
-export let confirmpw;
-export let error;
-export let message;
+export let resetpw = undefined;
+export let password = '';
+export let email = '';
+export let confirmpw = '';
+export let error = '';
+export let message = '';
 </script>
 
 <div

package/auth/Reset.svelte.d.ts

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 import type { AuthFunctionType } from '../types';
 declare const __propDef: {
     props: {
-        resetpw: AuthFunctionType;
-        password: string;
-        email: string;
-        confirmpw: string;
-        error: string;
-        message: string;
+        resetpw?: AuthFunctionType;
+        password?: string;
+        email?: string;
+        confirmpw?: string;
+        error?: string;
+        message?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Checkbox.svelte

@@ -0,0 +1,47 @@
+<script >export let legend = 'Checkbox variants';
+export let divClass = 'flex items-center mb-4';
+export let inputClass = 'w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+export let labelClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
+export let helperLabelClass = 'font-medium text-gray-900 dark:text-gray-300';
+export let options;
+</script>
+
+<fieldset>
+	<legend class="sr-only">{legend}</legend>
+	{#each options as option}
+		{#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}
+						checked={option.checked}
+						disabled={option.disabled}
+					/>
+				</div>
+				<div class="ml-3 text-sm">
+					<label for={option.id} class={helperLabelClass}>{option.label}</label>
+					{#if option.helper}
+						<div class="text-gray-500 dark:text-gray-300">
+							{@html option.helper}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{:else}
+			<div class={divClass}>
+				<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}
+	{/each}
+</fieldset>

package/forms/Checkbox.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        legend?: string;
+        divClass?: string;
+        inputClass?: string;
+        labelClass?: string;
+        helperLabelClass?: string;
+        options: {
+            id: string;
+            label: string;
+            checked?: boolean;
+            disabled?: boolean;
+            helper?: string;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CheckboxProps = typeof __propDef.props;
+export declare type CheckboxEvents = typeof __propDef.events;
+export declare type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/forms/Fileupload.svelte

@@ -0,0 +1,13 @@
+<script >export let id = 'user_avatar';
+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;
+</script>
+
+<label class={labelClass} for={id}>{label}</label>
+<input class={inputClass} aria-describedby="{id}_help" {id} type="file" />
+{#if helper}
+	<div class={divClass} id="{id}_help">{helper}</div>
+{/if}

package/forms/Fileupload.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string;
+        label?: string;
+        labelClass?: string;
+        inputClass?: string;
+        divClass?: string;
+        helper: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FileuploadProps = typeof __propDef.props;
+export declare type FileuploadEvents = typeof __propDef.events;
+export declare type FileuploadSlots = typeof __propDef.slots;
+export default class Fileupload extends SvelteComponentTyped<FileuploadProps, FileuploadEvents, FileuploadSlots> {
+}
+export {};

package/forms/FloatingLabelInput.svelte

@@ -0,0 +1,14 @@
+<script >export let id;
+export let type;
+export let name;
+export let label;
+export let required = false;
+export let divClass = 'relative z-0 mb-6 w-full group';
+export let inputClass = 'block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer';
+export let labelClass = 'absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6';
+</script>
+
+<div class={divClass}>
+	<input {type} {name} class={inputClass} placeholder=" " {required} />
+	<label for={id} class={labelClass}>{label}</label>
+</div>

package/forms/FloatingLabelInput.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        type: string;
+        name: string;
+        label: string;
+        required?: boolean;
+        divClass?: string;
+        inputClass?: string;
+        labelClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FloatingLabelInputProps = typeof __propDef.props;
+export declare type FloatingLabelInputEvents = typeof __propDef.events;
+export declare type FloatingLabelInputSlots = typeof __propDef.slots;
+export default class FloatingLabelInput extends SvelteComponentTyped<FloatingLabelInputProps, FloatingLabelInputEvents, FloatingLabelInputSlots> {
+}
+export {};

package/forms/Iconinput.svelte

@@ -0,0 +1,35 @@
+<script >export let label;
+export let id;
+export let type;
+export let icon;
+export let helper;
+export let placeholder;
+export let noBorder = false;
+export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
+export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 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';
+export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600';
+export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
+export let noBorderInputClass = '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 pl-10 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';
+export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
+export let iconClass = 'h-4 w-4 mr-2';
+</script>
+
+<label for={id} class={labelClass}>{label}</label>
+{#if noBorder}
+	<div class="relative">
+		<div class={noBorderDivClass}>
+			<svelte:component this={icon} className={iconClass} />
+		</div>
+		<input {type} {id} class={noBorderInputClass} {placeholder} />
+	</div>
+{:else}
+	<div class="flex">
+		<span class={spanClass}>
+			<svelte:component this={icon} className={iconClass} />
+		</span>
+		<input {type} {id} class={inputClass} {placeholder} />
+	</div>
+{/if}
+{#if helper}
+	<p class={helperClass}>{@html helper}</p>
+{/if}

package/forms/Iconinput.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from 'svelte';
+declare const __propDef: {
+    props: {
+        label: string;
+        id: string;
+        type: string;
+        icon: typeof SvelteComponent;
+        helper: string;
+        placeholder: string;
+        noBorder?: boolean;
+        labelClass?: string;
+        inputClass?: string;
+        spanClass?: string;
+        helperClass?: string;
+        noBorderInputClass?: string;
+        noBorderDivClass?: string;
+        iconClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type IconinputProps = typeof __propDef.props;
+export declare type IconinputEvents = typeof __propDef.events;
+export declare type IconinputSlots = typeof __propDef.slots;
+export default class Iconinput extends SvelteComponentTyped<IconinputProps, IconinputEvents, IconinputSlots> {
+}
+export {};

package/forms/Input.svelte

@@ -0,0 +1,23 @@
+<script >export let type;
+export let name;
+export let id;
+export let label;
+export let required;
+export let placeholder;
+export let size = 'text-sm';
+export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} 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`;
+export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
+export let divClass = 'mb-6';
+export let disabled = false;
+export let readonly = false;
+export let helper;
+export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
+</script>
+
+<div class={divClass}>
+	<label for={id} class={labelClass}>{label}</label>
+	<input {name} {type} {id} class={inputClass} {placeholder} {required} {disabled} {readonly} />
+	{#if helper}
+		<p class={helperClass}>{@html helper}</p>
+	{/if}
+</div>

package/forms/Input.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type: string;
+        name: string;
+        id: string;
+        label: string;
+        required: boolean;
+        placeholder: string;
+        size?: 'sm:text-md' | 'text-sm' | 'sm:text-xs';
+        inputClass?: string;
+        labelClass?: string;
+        divClass?: string;
+        disabled?: boolean;
+        readonly?: boolean;
+        helper: string;
+        helperClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InputProps = typeof __propDef.props;
+export declare type InputEvents = typeof __propDef.events;
+export declare type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/forms/Radio.svelte

@@ -0,0 +1,46 @@
+<script >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
+    }
+];
+</script>
+
+<fieldset>
+	<legend class="sr-only">Countries</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}
+			/>
+			<label for={option.id} class={labelClass}>
+				{option.label}
+			</label>
+		</div>
+	{/each}
+</fieldset>

package/forms/Radio.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        divClass?: string;
+        inputClass?: string;
+        labelClass?: string;
+        name?: string;
+        options?: {
+            id: string;
+            label: string;
+            value: string;
+            checked?: boolean;
+            disabled?: boolean;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RadioProps = typeof __propDef.props;
+export declare type RadioEvents = typeof __propDef.events;
+export declare type RadioSlots = typeof __propDef.slots;
+export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
+}
+export {};

package/forms/Select.svelte

@@ -0,0 +1,11 @@
+<script >export let id = 'countries';
+export let name = 'country';
+export let label = 'Select your country';
+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>
+<select {id} {name} class={selectClass}>
+	<slot />
+</select>

package/forms/Select.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string;
+        name?: string;
+        label?: string;
+        labelClass?: string;
+        selectClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SelectProps = typeof __propDef.props;
+export declare type SelectEvents = typeof __propDef.events;
+export declare type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/forms/SingleCheckbox.svelte

@@ -0,0 +1,16 @@
+<script >export let id;
+export let required = true;
+export let label;
+export let name;
+export let inputClass = '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';
+export let labelClass = 'font-medium text-gray-900 dark:text-gray-300';
+</script>
+
+<div class="flex items-start mb-6">
+	<div class="flex items-center h-5">
+		<input {id} aria-describedby={id} {name} type="checkbox" class={inputClass} {required} />
+	</div>
+	<div class="ml-3 text-sm">
+		<label for={id} class={labelClass}>{label}</label>
+	</div>
+</div>

package/forms/SingleCheckbox.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        required?: boolean;
+        label: string;
+        name: string;
+        inputClass?: string;
+        labelClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SingleCheckboxProps = typeof __propDef.props;
+export declare type SingleCheckboxEvents = typeof __propDef.events;
+export declare type SingleCheckboxSlots = typeof __propDef.slots;
+export default class SingleCheckbox extends SvelteComponentTyped<SingleCheckboxProps, SingleCheckboxEvents, SingleCheckboxSlots> {
+}
+export {};

package/forms/Textarea.svelte

@@ -0,0 +1,17 @@
+<script >// import type { TextareaType } from '../types';
+export let id = 'message';
+export let name = 'message';
+export let label = 'Your message';
+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 helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
+</script>
+
+<label for={id} class={labelClass}>{label}</label>
+<textarea {id} {name} {rows} class={textareaClass} {placeholder} />
+{#if helper}
+	<p class={helperClass}>{@html helper}</p>
+{/if}

package/forms/Textarea.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string;
+        name?: string;
+        label?: string;
+        rows?: number;
+        placeholder?: string;
+        labelClass?: string;
+        textareaClass?: string;
+        helper: string;
+        helperClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TextareaProps = typeof __propDef.props;
+export declare type TextareaEvents = typeof __propDef.events;
+export declare type TextareaSlots = typeof __propDef.slots;
+export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
+}
+export {};

package/forms/Toggle.svelte

@@ -0,0 +1,17 @@
+<script >// import type { ToggleType } from '../types';
+// export let props: ToggleType = {
+export let name = 'toggle-example';
+export let id = 'toggle-example';
+export let label = 'Toggle me';
+export let checked = false;
+export let disabled = false;
+export let labelClass = 'flex relative items-center mb-4 cursor-pointer';
+export let divClass = 'w-11 h-6 bg-gray-200 rounded-full border border-gray-200 toggle-bg dark:bg-gray-700 dark:border-gray-600';
+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} />
+	<div class={divClass} />
+	<span class={spanClass}>{label}</span>
+</label>

package/forms/Toggle.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string;
+        id?: string;
+        label?: string;
+        checked?: boolean;
+        disabled?: boolean;
+        labelClass?: string;
+        divClass?: string;
+        spanClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ToggleProps = typeof __propDef.props;
+export declare type ToggleEvents = typeof __propDef.events;
+export declare type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
+}
+export {};

package/index.d.ts

@@ -1,51 +1,60 @@
-import Accordion from "./accordions/AccordionDefault.svelte";
-import AccordionItem from "./accordions/AccordionItem.svelte";
-import Alert from "./alerts/Alert.svelte";
-import BorderAlert from "./alerts/BorderAlert.svelte";
-import InfoAlert from "./alerts/InfoAlert.svelte";
-import Confirm from "./auth/Confirm.svelte";
-import ForgotPassword from "./auth/ForgotPassword.svelte";
-import Login from "./auth/Login.svelte";
-import Register from "./auth/Register.svelte";
-import Reset from "./auth/Reset.svelte";
-import Badge from "./badges/Badge.svelte";
-import BadgeIcon from "./badges/BadgeIcon.svelte";
-import BadgeLink from "./badges/BadgeLink.svelte";
-import Button from "./buttons/Button.svelte";
-import ColorShadowButton from "./buttons/ColorShadowButton.svelte";
-import GradientDuotoneButton from "./buttons/GradientDuotoneButton.svelte";
-import GradientMonochromeButton from "./buttons/GradientMonochromeButton.svelte";
-import GradientOutlineButton from "./buttons/GradientOutlineButton.svelte";
-import ButtonGroup from "./buttongroups/ButtonGroup.svelte";
-import ButtonGroupOutline from "./buttongroups/ButtonGroupOutline.svelte";
-import Card from "./cards/Card.svelte";
-import HorizontalCard from "./cards/HorizontalCard.svelte";
-import InteractiveCard from "./cards/InteractiveCard.svelte";
-import ListCard from "./cards/ListCard.svelte";
-import CtaCard from "./cards/CtaCard.svelte";
-import EcommerceCard from "./cards/EcommerceCard.svelte";
-import SignInCard from "./cards/SignInCard.svelte";
-import DarkMode from "./darkmode/DarkMode.svelte";
-import Dropdown from "./dropdowns/DropdownDefault.svelte";
-import SimpleFooter from "./footer/SimpleFooter.svelte";
-import LogoFooter from "./footer/LogoFooter.svelte";
-import SocialMediaFooter from "./footer/SocialMediaFooter.svelte";
-import SitemapFooter from "./footer/SitemapFooter.svelte";
-import List from "./list-group/List.svelte";
-import { modalIdStore } from "./modals/modalStores";
-import ExtraLargeModal from "./modals/ExtraLargeModal.svelte";
-import LargeModal from "./modals/LargeModal.svelte";
-import MediumModal from "./modals/MediumModal.svelte";
-import ModalButton from "./modals/ModalButton.svelte";
-import SignInModal from "./modals/SignInModal.svelte";
-import SmallModal from "./modals/SmallModal.svelte";
-import Navbar from "./navbar/Navbar.svelte";
-import DropdownNavbar from "./navbar/DropdownNavbar.svelte";
-import Spinner from "./spinners/Spinner.svelte";
-import SpinnerButton from "./spinners/SpinnerButton.svelte";
-import InteractiveTabs from "./tabs/InteractiveTabs.svelte";
-import DefaultTabs from "./tabs/DefaultTabs.svelte";
-import PillTabs from "./tabs/PillTabs.svelte";
-import Tooltip from "./tooltips/Tooltip.svelte";
-import LightTooltip from "./tooltips/LightTooltip.svelte";
-export { Accordion, AccordionItem, Alert, BorderAlert, InfoAlert, Confirm, ForgotPassword, Login, Register, Reset, Badge, BadgeIcon, BadgeLink, Button, ColorShadowButton, GradientDuotoneButton, GradientMonochromeButton, GradientOutlineButton, ButtonGroup, ButtonGroupOutline, Card, HorizontalCard, InteractiveCard, ListCard, CtaCard, EcommerceCard, SignInCard, DarkMode, Dropdown, SimpleFooter, LogoFooter, SocialMediaFooter, SitemapFooter, List, modalIdStore, ExtraLargeModal, LargeModal, MediumModal, ModalButton, SignInModal, SmallModal, Navbar, DropdownNavbar, Spinner, SpinnerButton, InteractiveTabs, DefaultTabs, PillTabs, Tooltip, LightTooltip };
+export { default as Accordion } from "./accordions/AccordionDefault.svelte";
+export { default as AccordionItem } from "./accordions/AccordionItem.svelte";
+export { default as Alert } from "./alerts/Alert.svelte";
+export { default as BorderAlert } from "./alerts/BorderAlert.svelte";
+export { default as InfoAlert } from "./alerts/InfoAlert.svelte";
+export { default as Confirm } from "./auth/Confirm.svelte";
+export { default as ForgotPassword } from "./auth/ForgotPassword.svelte";
+export { default as Login } from "./auth/Login.svelte";
+export { default as Register } from "./auth/Register.svelte";
+export { default as Reset } from "./auth/Reset.svelte";
+export { default as Badge } from "./badges/Badge.svelte";
+export { default as BadgeIcon } from "./badges/BadgeIcon.svelte";
+export { default as BadgeLink } from "./badges/BadgeLink.svelte";
+export { default as Button } from "./buttons/Button.svelte";
+export { default as ColorShadowButton } from "./buttons/ColorShadowButton.svelte";
+export { default as GradientDuotoneButton } from "./buttons/GradientDuotoneButton.svelte";
+export { default as GradientMonochromeButton } from "./buttons/GradientMonochromeButton.svelte";
+export { default as GradientOutlineButton } from "./buttons/GradientOutlineButton.svelte";
+export { default as ButtonGroup } from "./buttongroups/ButtonGroup.svelte";
+export { default as ButtonGroupOutline } from "./buttongroups/ButtonGroupOutline.svelte";
+export { default as Card } from "./cards/Card.svelte";
+export { default as HorizontalCard } from "./cards/HorizontalCard.svelte";
+export { default as InteractiveCard } from "./cards/InteractiveCard.svelte";
+export { default as ListCard } from "./cards/ListCard.svelte";
+export { default as CtaCard } from "./cards/CtaCard.svelte";
+export { default as EcommerceCard } from "./cards/EcommerceCard.svelte";
+export { default as SignInCard } from "./cards/SignInCard.svelte";
+export { default as DarkMode } from "./darkmode/DarkMode.svelte";
+export { default as Dropdown } from "./dropdowns/DropdownDefault.svelte";
+export { default as SimpleFooter } from "./footer/SimpleFooter.svelte";
+export { default as LogoFooter } from "./footer/LogoFooter.svelte";
+export { default as SocialMediaFooter } from "./footer/SocialMediaFooter.svelte";
+export { default as SitemapFooter } from "./footer/SitemapFooter.svelte";
+export { default as Checkbox } from "./forms/Checkbox.svelte";
+export { default as Fileupload } from "./forms/Fileupload.svelte";
+export { default as FloatingLabelInput } from "./forms/FloatingLabelInput.svelte";
+export { default as Iconinput } from "./forms/Iconinput.svelte";
+export { default as Input } from "./forms/Input.svelte";
+export { default as Radio } from "./forms/Radio.svelte";
+export { default as SingleCheckbox } from "./forms/SingleCheckbox.svelte";
+export { default as Select } from "./forms/Select.svelte";
+export { default as Textarea } from "./forms/Textarea.svelte";
+export { default as Toggle } from "./forms/Toggle.svelte";
+export { default as List } from "./list-group/List.svelte";
+export { modalIdStore } from "./modals/modalStores";
+export { default as ExtraLargeModal } from "./modals/ExtraLargeModal.svelte";
+export { default as LargeModal } from "./modals/LargeModal.svelte";
+export { default as MediumModal } from "./modals/MediumModal.svelte";
+export { default as ModalButton } from "./modals/ModalButton.svelte";
+export { default as SignInModal } from "./modals/SignInModal.svelte";
+export { default as SmallModal } from "./modals/SmallModal.svelte";
+export { default as Navbar } from "./navbar/Navbar.svelte";
+export { default as DropdownNavbar } from "./navbar/DropdownNavbar.svelte";
+export { default as Spinner } from "./spinners/Spinner.svelte";
+export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
+export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
+export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";
+export { default as PillTabs } from "./tabs/PillTabs.svelte";
+export { default as Tooltip } from "./tooltips/Tooltip.svelte";
+export { default as LightTooltip } from "./tooltips/LightTooltip.svelte";

package/index.js

@@ -1,150 +1,93 @@
 // Accordion
-import Accordion from './accordions/AccordionDefault.svelte'
-import AccordionItem from './accordions/AccordionItem.svelte'
+export { default as Accordion }  from'./accordions/AccordionDefault.svelte'
+export { default as AccordionItem }  from'./accordions/AccordionItem.svelte'
 
 // Alerts
-import Alert from './alerts/Alert.svelte'
-import BorderAlert from './alerts/BorderAlert.svelte'
-import InfoAlert from './alerts/InfoAlert.svelte'
+export { default as Alert }  from'./alerts/Alert.svelte'
+export { default as BorderAlert }  from'./alerts/BorderAlert.svelte'
+export { default as InfoAlert }   from'./alerts/InfoAlert.svelte'
 
 // Auth
-import Confirm from './auth/Confirm.svelte'
-import ForgotPassword from './auth/ForgotPassword.svelte'
-import Login from './auth/Login.svelte'
-import Register from './auth/Register.svelte'
-import Reset from './auth/Reset.svelte'
+export { default as Confirm } from'./auth/Confirm.svelte'
+export { default as ForgotPassword } from'./auth/ForgotPassword.svelte'
+export { default as Login } from'./auth/Login.svelte'
+export { default as Register } from'./auth/Register.svelte'
+export { default as Reset } from'./auth/Reset.svelte'
 
 // Badges
-import Badge from './badges/Badge.svelte'
-import BadgeIcon from './badges/BadgeIcon.svelte'
-import BadgeLink from './badges/BadgeLink.svelte'
+export { default as Badge } from'./badges/Badge.svelte'
+export { default as BadgeIcon } from'./badges/BadgeIcon.svelte'
+export { default as BadgeLink } from'./badges/BadgeLink.svelte'
 
 // Buttons
-import Button from './buttons/Button.svelte'
-import ColorShadowButton from './buttons/ColorShadowButton.svelte'
-import GradientDuotoneButton from './buttons/GradientDuotoneButton.svelte'
-import GradientMonochromeButton from './buttons/GradientMonochromeButton.svelte'
-import GradientOutlineButton from './buttons/GradientOutlineButton.svelte'
+export { default as Button } from'./buttons/Button.svelte'
+export { default as ColorShadowButton } from'./buttons/ColorShadowButton.svelte'
+export { default as GradientDuotoneButton } from'./buttons/GradientDuotoneButton.svelte'
+export { default as GradientMonochromeButton } from'./buttons/GradientMonochromeButton.svelte'
+export { default as GradientOutlineButton } from'./buttons/GradientOutlineButton.svelte'
 
 // Buttongroups
-import ButtonGroup from './buttongroups/ButtonGroup.svelte'
-import ButtonGroupOutline from './buttongroups/ButtonGroupOutline.svelte'
+export { default as ButtonGroup } from'./buttongroups/ButtonGroup.svelte'
+export { default as ButtonGroupOutline } from'./buttongroups/ButtonGroupOutline.svelte'
 
 // Cards
-import Card from './cards/Card.svelte'
-import HorizontalCard from './cards/HorizontalCard.svelte'
-import InteractiveCard from './cards/InteractiveCard.svelte'
-import ListCard from './cards/ListCard.svelte'
-import CtaCard from './cards/CtaCard.svelte'
-import EcommerceCard from './cards/EcommerceCard.svelte'
-import SignInCard from './cards/SignInCard.svelte'
+export { default as Card } from'./cards/Card.svelte'
+export { default as HorizontalCard } from'./cards/HorizontalCard.svelte'
+export { default as InteractiveCard } from'./cards/InteractiveCard.svelte'
+export { default as ListCard } from'./cards/ListCard.svelte'
+export { default as CtaCard } from'./cards/CtaCard.svelte'
+export { default as EcommerceCard } from'./cards/EcommerceCard.svelte'
+export { default as SignInCard } from'./cards/SignInCard.svelte'
 
 // Dark mode
-import DarkMode from './darkmode/DarkMode.svelte'
+export { default as DarkMode } from'./darkmode/DarkMode.svelte'
 
 // Dropdown
-import Dropdown from './dropdowns/DropdownDefault.svelte' 
+export { default as Dropdown } from'./dropdowns/DropdownDefault.svelte' 
 
 // Footers
-import SimpleFooter from './footer/SimpleFooter.svelte'
-import LogoFooter from './footer/LogoFooter.svelte'
-import SocialMediaFooter from './footer/SocialMediaFooter.svelte'
-import SitemapFooter from './footer/SitemapFooter.svelte'
+export { default as SimpleFooter } from'./footer/SimpleFooter.svelte'
+export { default as LogoFooter } from'./footer/LogoFooter.svelte'
+export { default as SocialMediaFooter } from'./footer/SocialMediaFooter.svelte'
+export { default as SitemapFooter } from './footer/SitemapFooter.svelte'
+
+// Forms
+export { default as Checkbox } from './forms/Checkbox.svelte'
+export { default as Fileupload } from './forms/Fileupload.svelte'
+export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte'
+export { default as Iconinput } from './forms/Iconinput.svelte'
+export { default as Input } from './forms/Input.svelte'
+export { default as Radio } from './forms/Radio.svelte'
+export { default as SingleCheckbox } from './forms/SingleCheckbox.svelte'
+export { default as Select } from './forms/Select.svelte'
+export { default as Textarea } from './forms/Textarea.svelte'
+export { default as Toggle } from './forms/Toggle.svelte'
 
 // List
-import List from './list-group/List.svelte'
+export { default as List } from'./list-group/List.svelte'
 
 // Modals
-import { modalIdStore } from './modals/modalStores'
-import ExtraLargeModal from './modals/ExtraLargeModal.svelte'
-import LargeModal from './modals/LargeModal.svelte'
-import MediumModal from './modals/MediumModal.svelte'
-import ModalButton from './modals/ModalButton.svelte'
-import SignInModal from './modals/SignInModal.svelte'
-import SmallModal from './modals/SmallModal.svelte'
+export { modalIdStore } from'./modals/modalStores'
+export { default as ExtraLargeModal } from'./modals/ExtraLargeModal.svelte'
+export { default as LargeModal } from'./modals/LargeModal.svelte'
+export { default as MediumModal } from'./modals/MediumModal.svelte'
+export { default as ModalButton } from'./modals/ModalButton.svelte'
+export { default as SignInModal } from'./modals/SignInModal.svelte'
+export { default as SmallModal } from'./modals/SmallModal.svelte'
 
 // Navbar
-import Navbar from './navbar/Navbar.svelte'
-import DropdownNavbar from './navbar/DropdownNavbar.svelte'
+export { default as Navbar } from'./navbar/Navbar.svelte'
+export { default as DropdownNavbar } from'./navbar/DropdownNavbar.svelte'
 
 // Spin
-import Spinner from './spinners/Spinner.svelte'
-import SpinnerButton from './spinners/SpinnerButton.svelte'
+export { default as Spinner } from'./spinners/Spinner.svelte'
+export { default as SpinnerButton } from'./spinners/SpinnerButton.svelte'
 
 // Tabs
-import InteractiveTabs from './tabs/InteractiveTabs.svelte'
-import DefaultTabs from './tabs/DefaultTabs.svelte'
-import PillTabs from './tabs/PillTabs.svelte'
+export { default as InteractiveTabs } from'./tabs/InteractiveTabs.svelte'
+export { default as DefaultTabs } from'./tabs/DefaultTabs.svelte'
+export { default as PillTabs } from'./tabs/PillTabs.svelte'
 
 // Tooltips
-import Tooltip from './tooltips/Tooltip.svelte'
-import LightTooltip from './tooltips/LightTooltip.svelte'
-
-export {
-  // Accordions
-  Accordion,
-  AccordionItem,
-  // alerts
-  Alert,
-  BorderAlert,
-  InfoAlert,
-  // auth
-  Confirm,
-  ForgotPassword,
-  Login,
-  Register,
-  Reset,
-  // Badges
-  Badge,
-  BadgeIcon,
-  BadgeLink,
-  // Buttons
-  Button,
-  ColorShadowButton,
-  GradientDuotoneButton,
-  GradientMonochromeButton,
-  GradientOutlineButton,
-  // Buttongroup
-  ButtonGroup,
-  ButtonGroupOutline,
-  // cards
-  Card,
-  HorizontalCard,
-  InteractiveCard,
-  ListCard,
-  CtaCard,
-  EcommerceCard,
-  SignInCard,
-  // darkmode
-  DarkMode,
-  // dropdowns
-  Dropdown,
-  // footers
-  SimpleFooter,
-  LogoFooter,
-  SocialMediaFooter,
-  SitemapFooter,
-  // list
-  List,
-  // Modals
-  modalIdStore,
-  ExtraLargeModal,
-  LargeModal,
-  MediumModal,
-  ModalButton,
-  SignInModal,
-  SmallModal,
-  // Navbar
-  Navbar,
-  DropdownNavbar,
-  // Spin
-  Spinner,
-  SpinnerButton,
-  // Tabs
-  InteractiveTabs,
-  DefaultTabs,
-  PillTabs,
-  // Tooltips
-  Tooltip,
-  LightTooltip,
-}
+export { default as Tooltip } from'./tooltips/Tooltip.svelte'
+export { default as LightTooltip } from'./tooltips/LightTooltip.svelte'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.9.6",
+  "version": "0.10.1",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -76,6 +76,7 @@
     "./alerts/InfoAlert.svelte": "./alerts/InfoAlert.svelte",
     "./auth/Confirm.svelte": "./auth/Confirm.svelte",
     "./auth/ForgotPassword.svelte": "./auth/ForgotPassword.svelte",
+    "./auth/Input.svelte": "./auth/Input.svelte",
     "./auth/Login.svelte": "./auth/Login.svelte",
     "./auth/Register.svelte": "./auth/Register.svelte",
     "./auth/Reset.svelte": "./auth/Reset.svelte",
@@ -102,6 +103,16 @@
     "./footer/SimpleFooter.svelte": "./footer/SimpleFooter.svelte",
     "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",
     "./footer/SocialMediaFooter.svelte": "./footer/SocialMediaFooter.svelte",
+    "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
+    "./forms/Fileupload.svelte": "./forms/Fileupload.svelte",
+    "./forms/FloatingLabelInput.svelte": "./forms/FloatingLabelInput.svelte",
+    "./forms/Iconinput.svelte": "./forms/Iconinput.svelte",
+    "./forms/Input.svelte": "./forms/Input.svelte",
+    "./forms/Radio.svelte": "./forms/Radio.svelte",
+    "./forms/Select.svelte": "./forms/Select.svelte",
+    "./forms/SingleCheckbox.svelte": "./forms/SingleCheckbox.svelte",
+    "./forms/Textarea.svelte": "./forms/Textarea.svelte",
+    "./forms/Toggle.svelte": "./forms/Toggle.svelte",
     ".": "./index.js",
     "./list-group/List.svelte": "./list-group/List.svelte",
     "./modals/ExtraLargeModal.svelte": "./modals/ExtraLargeModal.svelte",

package/types.d.ts

@@ -75,5 +75,15 @@ export interface ListCardType {
     field2?: string;
     field3?: string;
 }
-export declare type AuthFunctionType = () => Promise<string>;
+export declare type AuthFunctionType = () => Promise<void>;
 export declare type ButtonType = 'button' | 'submit' | 'reset';
+export interface AuthFieldType {
+    label: string;
+    fieldtype: string;
+    required?: boolean;
+    placeholder?: string;
+}
+export declare type SelectOptionType = {
+    name: string;
+    value: string;
+};

package/types.js

@@ -1 +1,8 @@
 export {};
+// export type ToggleType = {
+//     name: string;
+//     id: string;
+//     label: string;
+//     checked?: boolean;
+//     disabled?: boolean;
+// }