flowbite-svelte 0.15.7 → 0.15.10

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/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

@@ -7,13 +7,6 @@ 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
-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'
-
 // Avatar
 export { default as Avatar } from './avatar/Avatar.svelte'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.7",
+  "version": "0.15.10",
   "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",

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

package/auth/Reset.svelte

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

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