flowbite-svelte 0.15.8 → 0.15.11

package/forms/Radio.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 import type { RadioType } from '../types';
 declare const __propDef: {
     props: {
-        legend?: string;
         divClass?: string;
         inputClass?: string;
         labelClass?: string;
@@ -12,7 +11,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        helper: {};
+    };
 };
 export declare type RadioProps = typeof __propDef.props;
 export declare type RadioEvents = typeof __propDef.events;

package/forms/Search.svelte

@@ -0,0 +1,17 @@
+<script>export let id = '';
+export let labelClass = 'mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300';
+export let inputClass = 'block p-4 pl-10 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 btnClass = 'text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+export let placeholder = 'Search';
+</script>
+
+<form on:submit>
+	<label for={id} class={labelClass}>Search</label>
+	<div class="relative">
+		<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+			<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+		</div>
+		<input type="search" {id} class={inputClass} {placeholder} {...$$restProps} />
+		<button type="submit" class={btnClass}>Search</button>
+	</div>
+</form>

package/forms/Search.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id?: string;
+        labelClass?: string;
+        inputClass?: string;
+        btnClass?: string;
+        placeholder?: string;
+    };
+    events: {
+        submit: SubmitEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SearchProps = typeof __propDef.props;
+export declare type SearchEvents = typeof __propDef.events;
+export declare type SearchSlots = typeof __propDef.slots;
+export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
+}
+export {};

package/forms/Toggle.svelte

@@ -1,16 +1,47 @@
 <script>import generateId from '../utils/generateId.js';
 export let name = 'toggle-example';
+export let color;
+export let size = 'default';
 export let id = generateId();
 export let label = 'Toggle me';
+export let value;
 export let checked = false;
 export let disabled = false;
-export let labelClass = 'flex relative items-center mb-4 cursor-pointer';
+export let labelClass = 'relative inline-flex items-center 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 inputClass = 'sr-only';
+if (color || size) {
+    inputClass += ' peer';
+}
 export let spanClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
+if (color === 'red') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600";
+}
+else if (color === 'green') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600";
+}
+else if (color === 'purple') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600";
+}
+else if (color === 'yellow') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-yellow-400";
+}
+else if (color === 'teal') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600";
+}
+else if (color === 'orange') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-orange-500";
+}
+else if (size === 'small') {
+    divClass = "w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
+}
+else if (size === 'large') {
+    divClass = "w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
+}
 </script>
 
 <label for={id} class={labelClass}>
-	<input type="checkbox" {id} class="sr-only" {checked} {name} {disabled} />
-	<div class={divClass} />
+	<input type="checkbox" {id} class={inputClass} {value} {checked} {name} {disabled} />
+	<div class="{divClass} {$$props.class}" />
 	<span class={spanClass}>{label}</span>
 </label>

package/forms/Toggle.svelte.d.ts

@@ -1,13 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ToggleColorType } from '../types.js';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         name?: string;
+        color: ToggleColorType;
+        size?: 'small' | 'default' | 'large';
         id?: string;
         label?: string;
+        value: string;
         checked?: boolean;
         disabled?: boolean;
         labelClass?: string;
         divClass?: string;
+        inputClass?: string;
         spanClass?: string;
     };
     events: {

package/index.js

@@ -65,6 +65,7 @@ export { default as Input } from './forms/Input.svelte'
 export { default as Radio } from './forms/Radio.svelte'
 export { default as Range } from './forms/Range.svelte'
 export { default as SingleCheckbox } from './forms/SingleCheckbox.svelte'
+export { default as Search } from './forms/Search.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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.8",
+  "version": "0.15.11",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -13,7 +13,7 @@
   "license": "MIT",
   "devDependencies": {
     "@codewithshin/svelte-feathericons": "^0.1.9",
-    "@codewithshin/svelte-sidebar": "^0.4.8",
+    "@codewithshin/svelte-sidebar": "^0.5.7",
     "@codewithshin/svelte-utterances": "^0.2.2",
     "@playwright/test": "^1.21.0",
     "@sveltejs/adapter-auto": "next",
@@ -90,12 +90,6 @@
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./alerts/BorderAlert.svelte": "./alerts/BorderAlert.svelte",
     "./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",
     "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
@@ -136,6 +130,7 @@
     "./forms/Input.svelte": "./forms/Input.svelte",
     "./forms/Radio.svelte": "./forms/Radio.svelte",
     "./forms/Range.svelte": "./forms/Range.svelte",
+    "./forms/Search.svelte": "./forms/Search.svelte",
     "./forms/Select.svelte": "./forms/Select.svelte",
     "./forms/SingleCheckbox.svelte": "./forms/SingleCheckbox.svelte",
     "./forms/Textarea.svelte": "./forms/Textarea.svelte",

package/types.d.ts

@@ -119,7 +119,7 @@ export interface PillTabType {
 }
 export interface RadioType {
     id: string;
-    label: string;
+    label: string | HTMLElement;
     value: string;
     checked?: boolean;
     disabled?: boolean;
@@ -196,6 +196,7 @@ export interface TimelineItemHorizontalType {
     iconClass?: string;
     text?: HTMLElement | string;
 }
+export declare type ToggleColorType = 'red' | 'green' | 'purple' | 'yellow' | 'teal' | 'orange';
 export interface TransitionParamTypes {
     delay?: number;
     duration?: number;

package/auth/Confirm.svelte

@@ -1,23 +0,0 @@
-<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 textSize="text-sm" >{loginLink.name}</Button>
-		</a>
-	{:else}
-		<Spinner />
-	{/if}
-	{#if error}
-		<Alert alertId="alert-red" color="red" closeBtn>{error}</Alert>
-	{/if}
-</div>

package/auth/Confirm.svelte.d.ts

@@ -1,19 +0,0 @@
-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

@@ -1,57 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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/Input.svelte.d.ts

@@ -1,19 +0,0 @@
-/** @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,116 +0,0 @@
-<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 = '';
-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';
-}
-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}>{submitText}</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

@@ -1,25 +0,0 @@
-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;
-        submitText?: 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

@@ -1,118 +0,0 @@
-<script>import { Alert } from '../index';
-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: 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

@@ -1,23 +0,0 @@
-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 {};