flowbite-svelte 0.9.2 → 0.9.5

package/navbar/Navbar.svelte

@@ -8,21 +8,23 @@ const handleClickbtn = () => {
     barHidden = !barHidden;
 };
 export let menus;
+export let navClass = 'px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700';
+const navDivClass = 'container flex flex-wrap justify-between items-center mx-auto';
+export let spanClass = 'self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white';
+export let buttonClass = 'inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500';
+export let liLinkClass = `block py-2 pr-4 pl-3  text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent ${textsize}`;
 </script>
 
-<nav class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-	<div class="container flex flex-wrap justify-between items-center mx-auto">
+<nav class={navClass}>
+	<div class={navDivClass}>
 		<a href="/" class="flex">
 			<img src={logo} {alt} />
-			<span
-				class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white"
-				>{sitename}</span
-			>
+			<span class={spanClass}>{sitename}</span>
 		</a>
 		<button
 			on:click={handleClickbtn}
 			type="button"
-			class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500"
+			class={buttonClass}
 			aria-controls="mobile-menu-2"
 			aria-expanded="false"
 		>
@@ -52,14 +54,9 @@ export let menus;
 		</button>
 		<div class:hidden={barHidden} class="hidden w-full md:block md:w-auto" id="mobile-menu">
 			<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-				{#each menus as { name, link, rel }}
+				{#each menus as { name, href, rel }}
 					<li>
-						<a
-							class:active={$page.url.pathname === link}
-							href={link}
-							{rel}
-							class="block py-2 pr-4 pl-3  text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent {textsize}"
-							>{name}</a
+						<a class:active={$page.url.pathname === href} {href} {rel} class={liLinkClass}>{name}</a
 						>
 					</li>
 				{/each}

package/navbar/Navbar.svelte.d.ts

@@ -7,6 +7,10 @@ declare const __propDef: {
         alt?: string;
         textsize?: string;
         menus: LinkType[];
+        navClass?: string;
+        spanClass?: string;
+        buttonClass?: string;
+        liLinkClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.9.2",
+  "version": "0.9.5",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -11,7 +11,7 @@
   "homepage": "https://github.com/shinokada/flowbite-svelte",
   "license": "MIT",
   "devDependencies": {
-    "@codewithshin/svelte-sidebar": "^0.2.3",
+    "@codewithshin/svelte-sidebar": "^0.4.2",
     "@codewithshin/svelte-simpleicons": "^0.2.2",
     "@codewithshin/svelte-utterances": "^0.1.2",
     "@playwright/test": "^1.19.1",
@@ -23,7 +23,6 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
-    "flowbite-svelte": "^0.9.0",
     "mdsvex": "^0.10.5",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.1",
@@ -75,6 +74,11 @@
     "./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/Login.svelte": "./auth/Login.svelte",
+    "./auth/Register.svelte": "./auth/Register.svelte",
+    "./auth/Reset.svelte": "./auth/Reset.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
     "./badges/BadgeLink.svelte": "./badges/BadgeLink.svelte",

package/spinners/Spinner.svelte

@@ -1,7 +1,7 @@
 <script >export let color = 'blue';
 export let bg = 'text-gray-200';
 export let size = 'w-8 h-8';
-export let align;
+export let align = 'text-center';
 let colorClass;
 if (color === 'blue') {
     colorClass = 'fill-blue-600';

package/spinners/Spinner.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         color?: Colors;
         bg?: string;
         size?: string;
-        align: AlignType;
+        align?: AlignType;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/spinners/SpinnerButton.svelte

@@ -1,4 +1,4 @@
-<script >export let color; // {null|blue}
+<script >export let color;
 let colorClass;
 let fillColor1;
 let fillColor2;

package/tabs/DefaultTabs.svelte

@@ -2,10 +2,10 @@
 </script>
 
 <ul class="flex flex-wrap border-b border-gray-200 dark:border-gray-700">
-	{#each tabs as { name, active, link, rel }}
+	{#each tabs as { name, active, href, rel }}
 		<li class="mr-2">
 			<a
-				href={link}
+				{href}
 				{rel}
 				aria-current="page"
 				class={active

package/tabs/InteractiveTabs.svelte

@@ -6,29 +6,29 @@ export let tabs;
 
 <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
 	<ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
-		{#each tabs as { label, id }}
+		{#each tabs as { name, id }}
 			<li class="mr-2" role="presentation">
 				<button
 					on:click={handleClick(id)}
 					class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
-					id="{label}-tab"
+					id="{name}-tab"
 					type="button"
 					role="tab"
 					class:active={activeTabValue === id}
-					aria-controls={label}>{label}</button
+					aria-controls={name}>{name}</button
 				>
 			</li>
 		{/each}
 	</ul>
 </div>
 <div id="{tabId}Content">
-	{#each tabs as { label, content, id }}
+	{#each tabs as { name, content, id }}
 		{#if activeTabValue === id}
 			<div
 				class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
-				id={label}
+				id={name}
 				role="tabpanel"
-				aria-labelledby="{label}-tab"
+				aria-labelledby="{name}-tab"
 			>
 				<p class="text-sm text-gray-500 dark:text-gray-400">
 					{content}

package/tabs/PillTabs.svelte

@@ -2,13 +2,13 @@
 </script>
 
 <ul class="flex flex-wrap">
-	{#each tabs as { name, selected, link }}
+	{#each tabs as { name, selected, href }}
 		<li class="mr-2">
 			<a
 				class="{selected
 					? 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg'
 					: 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'} "
-				href={link}
+				{href}
 				rel="external">{name}</a
 			>
 		</li>

package/types.d.ts

@@ -6,7 +6,7 @@ export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue
 export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
 export interface ButtonGroupType {
     name: string;
-    link?: string;
+    href?: string;
     rel?: string;
     icon?: typeof SvelteComponent;
 }
@@ -14,7 +14,7 @@ export declare type CardButtonType = {
     textSize?: Textsize;
     name: string;
     type?: Buttontypes;
-    link?: string;
+    href?: string;
     rel?: string;
     rounded?: boolean;
 };
@@ -24,43 +24,56 @@ export declare type ImgType = {
 };
 export interface LinkType {
     name: string;
-    link: string;
+    href: string;
     rel?: string;
 }
 export interface SiteType {
     name: string;
-    link: string;
+    href: string;
+    img?: string;
 }
 export interface SocialMediaType {
-    link: string;
+    href: string;
     icon: typeof SvelteComponent;
 }
 export declare type AlignType = 'text-center' | 'text-left' | 'text-right';
 export interface TabType {
     name: string;
     active: boolean;
-    link: string;
+    href: string;
     rel?: string;
 }
 export interface InteractiveTabType {
-    label: string;
+    name: string;
     id: number;
     content: string;
 }
 export interface PillTabType {
     name: string;
     selected: boolean;
-    link: string;
+    href: string;
 }
 export interface NavbarType {
     id: number;
     name: string;
-    link: string;
+    href: string;
     rel?: string;
     child?: NavbarType[];
 }
-export interface DropdownLinkType {
-    label: string;
+export interface SocialMediaLinkType {
+    parent: string;
+    children?: LinkType[];
+}
+export interface DropdownType {
+    name: string;
     href: string;
-    rel?: string;
+    divider: boolean;
+}
+export interface ListCardType {
+    img: ImgType;
+    field1: string;
+    field2?: string;
+    field3?: string;
 }
+export declare type AuthFunctionType = () => Promise<string>;
+export declare type ButtonType = 'button' | 'submit' | 'reset';