flowbite-svelte 0.9.4 → 0.9.7

package/accordions/AccordionItem.svelte

@@ -1,7 +1,7 @@
 <script >import { getContext } from 'svelte';
 import collapse from 'svelte-collapse';
 import { ChevronDownIconSolid, ChevronUpIconSolid } from '@codewithshin/svelte-heroicons';
-export let id;
+export let id = '';
 const store = getContext('svelte-collapsible-accordion');
 $: params = {
     open: $store.id === id,

package/accordions/AccordionItem.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id: string;
+        id?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/auth/Confirm.svelte

@@ -0,0 +1,23 @@
+<script >import { Button, Alert, Spinner } from '../index';
+export let loginLink;
+export let success;
+export let error;
+</script>
+
+<div
+	class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
+>
+	{#if success}
+		<h1 class="text-xl w-full mb-4 font-medium text-gray-900 dark:text-white">
+			Your email is confirmed.
+		</h1>
+		<a href={loginLink.href} class="py-4">
+			<Button name={loginLink.name} textSize="text-sm" />
+		</a>
+	{:else}
+		<Spinner />
+	{/if}
+	{#if error}
+		<Alert alertId="alert-red" color="red" closeBtn>{error}</Alert>
+	{/if}
+</div>

package/auth/Confirm.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { LinkType } from '../types';
+declare const __propDef: {
+    props: {
+        loginLink: LinkType;
+        success: string;
+        error: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ConfirmProps = typeof __propDef.props;
+export declare type ConfirmEvents = typeof __propDef.events;
+export declare type ConfirmSlots = typeof __propDef.slots;
+export default class Confirm extends SvelteComponentTyped<ConfirmProps, ConfirmEvents, ConfirmSlots> {
+}
+export {};

package/auth/ForgotPassword.svelte

@@ -0,0 +1,57 @@
+<script >import { Alert } from '../index';
+export let forgot = undefined;
+export let email = '';
+export let error = '';
+export let message = '';
+export let data = '';
+</script>
+
+<div
+	class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
+>
+	<form class="space-y-6" on:submit|preventDefault={forgot}>
+		<div class="heading">
+			<a class="back" href="/"><i class="bi bi-arrow-left dark:text-white" /></a>
+			<h2 class="text-xl font-medium text-gray-900 dark:text-white">Forgot password</h2>
+		</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}
+			/>
+			{#if data}
+				<div class="mt-6">
+					<Alert alertId="alert-green" color="yellow" closeBtn>
+						{data}
+					</Alert>
+				</div>
+			{/if}
+			{#if message}
+				<div class="mt-6">
+					<Alert alertId="alert-green" color="green" closeBtn>
+						{message}
+					</Alert>
+				</div>
+			{/if}
+			{#if error}
+				<div class="mt-6">
+					<Alert alertId="alert-green" color="red" closeBtn>
+						{error}
+					</Alert>
+				</div>
+			{/if}
+		</div>
+		<button
+			type="submit"
+			class="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"
+			>Send recovery email</button
+		>
+	</form>
+</div>

package/auth/ForgotPassword.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AuthFunctionType } from '../types';
+declare const __propDef: {
+    props: {
+        forgot?: AuthFunctionType;
+        email?: string;
+        error?: string;
+        message?: string;
+        data?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ForgotPasswordProps = typeof __propDef.props;
+export declare type ForgotPasswordEvents = typeof __propDef.events;
+export declare type ForgotPasswordSlots = typeof __propDef.slots;
+export default class ForgotPassword extends SvelteComponentTyped<ForgotPasswordProps, ForgotPasswordEvents, ForgotPasswordSlots> {
+}
+export {};

package/auth/Login.svelte

@@ -0,0 +1,128 @@
+<script >import { Alert } from '../index';
+export let login = undefined;
+export let title = 'Sign in';
+export let btnSignInColor = 'blue';
+export let rememberMe = false;
+export let signup = undefined;
+export let lostPassword = undefined;
+export let error = '';
+let submitClass;
+export let fields = [
+    {
+        label: 'email',
+        fieldtype: 'email',
+        required: true,
+        placeholder: 'Your email'
+    },
+    {
+        label: 'password',
+        fieldtype: 'password',
+        required: true,
+        placeholder: 'Your password'
+    }
+];
+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';
+}
+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';
+}
+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';
+}
+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';
+}
+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';
+}
+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';
+}
+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';
+}
+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';
+}
+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';
+}
+</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"
+>
+	<form class="space-y-6" on:submit|preventDefault={login}>
+		<h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
+		{#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"
+							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
+						>
+					</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
+				>
+			{/if}
+		</div>
+		{#if error}
+			<div class="mt-6">
+				<Alert alertId="alert-red" color="red" closeBtn>
+					{error}
+				</Alert>
+			</div>
+		{/if}
+		<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
+				>
+			</div>
+		{/if}
+	</form>
+</div>

package/auth/Login.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
+declare const __propDef: {
+    props: {
+        login?: AuthFunctionType;
+        title?: string;
+        btnSignInColor?: string;
+        rememberMe?: boolean;
+        signup?: LinkType;
+        lostPassword?: LinkType;
+        error?: string;
+        fields?: AuthFieldType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type LoginProps = typeof __propDef.props;
+export declare type LoginEvents = typeof __propDef.events;
+export declare type LoginSlots = typeof __propDef.slots;
+export default class Login extends SvelteComponentTyped<LoginProps, LoginEvents, LoginSlots> {
+}
+export {};

package/auth/Register.svelte

@@ -0,0 +1,116 @@
+<script >import { Alert } from '../index';
+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: 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
+	class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
+>
+	<form class="space-y-6" on:submit|preventDefault={register}>
+		{#if message}
+			<div class="mt-6">
+				<Alert alertId="alert-green" color="green" closeBtn>
+					{message}
+				</Alert>
+			</div>
+		{/if}
+		<div class="heading">
+			<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>
+		{#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>
+					{error}
+				</Alert>
+			</div>
+		{/if}
+		<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"
+							required
+						/>
+					</div>
+					<div class="ml-3 text-sm">
+						<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
+				>
+			{/if}
+		</div>
+		<button
+			type="submit"
+			class="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"
+			>Register</button
+		>
+		{#if login}
+			<a
+				href={login.href}
+				rel={login.rel}
+				class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500">{login.name}</a
+			>
+		{/if}
+	</form>
+</div>

package/auth/Register.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
+declare const __propDef: {
+    props: {
+        register?: AuthFunctionType;
+        error?: string;
+        login?: LinkType;
+        rememberMe?: boolean;
+        lostPassword?: LinkType;
+        message?: string;
+        fields?: AuthFieldType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RegisterProps = typeof __propDef.props;
+export declare type RegisterEvents = typeof __propDef.events;
+export declare type RegisterSlots = typeof __propDef.slots;
+export default class Register extends SvelteComponentTyped<RegisterProps, RegisterEvents, RegisterSlots> {
+}
+export {};

package/auth/Reset.svelte

@@ -0,0 +1,57 @@
+<script >import { Alert } from '../index';
+export let resetpw = undefined;
+export let password = '';
+export let email = '';
+export let confirmpw = '';
+export let error = '';
+export let message = '';
+</script>
+
+<div
+	class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
+>
+	<form class="space-y-6" on:submit|preventDefault={resetpw}>
+		<div class="heading">
+			<h2 class="text-xl font-medium text-gray-900 dark:text-white">Reset password</h2>
+		</div>
+		<input
+			type="password"
+			required
+			name="password"
+			placeholder="Enter your password."
+			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"
+		/>
+		<input
+			type="password"
+			required
+			name="confirmpw"
+			placeholder="Confirm your password."
+			bind:value={confirmpw}
+			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"
+		/>
+		<input type="hidden" required name="email" bind:value={email} />
+		{#if error}
+			<div class="mt-6">
+				<Alert alertId="alert-green" color="red" closeBtn>
+					{error}
+				</Alert>
+			</div>
+		{/if}
+		{#if message}
+			<div class="mt-6">
+				<Alert alertId="alert-green" color="green" closeBtn>
+					{message}
+				</Alert>
+				<a
+					href="/auth/login"
+					class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500">Go to Login</a
+				>
+			</div>
+		{/if}
+		<button
+			class="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"
+			type="submit">Reset</button
+		>
+	</form>
+</div>

package/auth/Reset.svelte.d.ts

@@ -0,0 +1,22 @@
+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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ResetProps = typeof __propDef.props;
+export declare type ResetEvents = typeof __propDef.events;
+export declare type ResetSlots = typeof __propDef.slots;
+export default class Reset extends SvelteComponentTyped<ResetProps, ResetEvents, ResetSlots> {
+}
+export {};

package/buttons/Button.svelte

@@ -1,7 +1,8 @@
 <script >export let rounded = false;
 export let textSize = 'text-sm';
 export let name = 'Read more';
-export let type = 'blue';
+export let buttonType = 'blue';
+export let type = 'button';
 let paddings;
 if (textSize === 'text-xs') {
     paddings = 'py-2 px-3';
@@ -17,44 +18,44 @@ else {
 }
 let buttonClass;
 let round = rounded ? 'rounded-full' : 'rounded-lg';
-if (type === 'blue') {
+if (buttonType === 'blue') {
     buttonClass = `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
 }
-else if (type === 'blue-outline') {
+else if (buttonType === 'blue-outline') {
     buttonClass = `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 (type === 'dark') {
+else if (buttonType === 'dark') {
     buttonClass =
         buttonClass = `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 (type === 'dark-outline') {
+else if (buttonType === 'dark-outline') {
     buttonClass = `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`;
 }
-else if (type === 'light') {
+else if (buttonType === 'light') {
     buttonClass = `text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
 }
-else if (type === 'green') {
+else if (buttonType === 'green') {
     buttonClass = `text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
 }
-else if (type === 'green-outline') {
+else if (buttonType === 'green-outline') {
     buttonClass = `text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
 }
-else if (type === 'red') {
+else if (buttonType === 'red') {
     buttonClass = `text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
 }
-else if (type === 'red-outline') {
+else if (buttonType === 'red-outline') {
     buttonClass = `text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
 }
-else if (type === 'yellow') {
+else if (buttonType === 'yellow') {
     buttonClass = `text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:focus:ring-yellow-900`;
 }
-else if (type === 'yellow-outline') {
+else if (buttonType === 'yellow-outline') {
     buttonClass = `text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
 }
-else if (type === 'purple') {
+else if (buttonType === 'purple') {
     buttonClass = `text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium ${round} ${textSize} ${paddings} text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
 }
-else if (type === 'purple-outline') {
+else if (buttonType === 'purple-outline') {
     buttonClass = `text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
 }
 else {
@@ -63,4 +64,4 @@ else {
 }
 </script>
 
-<button type="button" class={buttonClass} on:click>{name}</button>
+<button {type} class={buttonClass} on:click>{name}</button>

package/buttons/Button.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Buttontypes, Textsize } from '../types';
+import type { Buttontypes, ButtonType, Textsize } from '../types';
 declare const __propDef: {
     props: {
         rounded?: boolean;
         textSize?: Textsize;
         name?: string;
-        type?: Buttontypes;
+        buttonType?: Buttontypes;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;

package/buttons/ColorShadowButton.svelte

@@ -2,6 +2,7 @@
 export let color = 'blue';
 export let name = 'Read more';
 let btnClass;
+export let type = 'button';
 if (color === 'blue') {
     btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
 }
@@ -31,4 +32,4 @@ else {
 }
 </script>
 
-<button type="button" class={btnClass} on:click>{name}</button>
+<button {type} class={btnClass} on:click>{name}</button>

package/buttons/ColorShadowButton.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Buttonshadows, Textsize } from '../types';
+import type { Buttonshadows, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
         textSize?: Textsize;
         color?: Buttonshadows;
         name?: string;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;

package/buttons/GradientDuotoneButton.svelte

@@ -2,6 +2,7 @@
 export let color = 'purple2blue';
 export let name = 'Read more';
 let btnClass;
+export let type = 'button';
 if (color === 'purple2blue') {
     btnClass = `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
 }
@@ -28,4 +29,4 @@ else {
 }
 </script>
 
-<button type="button" class={btnClass} on:click>{name}</button>
+<button {type} class={btnClass} on:click>{name}</button>

package/buttons/GradientDuotoneButton.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Gradientduotones, Textsize } from '../types';
+import type { Gradientduotones, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
         textSize?: Textsize;
         color?: Gradientduotones;
         name?: string;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;