flowbite-svelte 0.8.8 → 0.9.2

package/cards/InteractiveCard.svelte

@@ -1,127 +1,113 @@
-<script>
-  let isOpen = true;
-  const toggleDropdown = () => {
+<script >let isOpen = true;
+const toggleDropdown = () => {
     isOpen = !isOpen;
-  };
-
-  export let dropdownLinks = [
-    {
-      href: "/",
-      label: "label 1",
-    },
-    {
-      href: "about",
-      label: "About",
-    },
-    {
-      href: "profile",
-      label: "Profile",
-    },
-  ];
-  export let img = {
-    src: "",
-    alt: "",
-  };
-  export let header = "Lorem ipsum";
-  export let content = "Proin efficitur purus felis.";
-  export let buttonColor = "blue";
-  export let link1 = { href: "", title: "", rel: "" };
-  export let link2 = { href: "", title: "", rel: "" };
-  let linkClass;
-  if (buttonColor === "blue") {
+};
+export let dropdownLinks;
+export let img;
+export let header = 'Lorem ipsum';
+export let content = 'Proin efficitur purus felis.';
+export let buttonColor = 'blue';
+export let link1;
+export let link2;
+let linkClass;
+if (buttonColor === 'blue') {
     linkClass =
-      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-  } else if (buttonColor === "gray") {
+        'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+}
+else if (buttonColor === 'gray') {
     linkClass =
-      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800";
-  } else if (buttonColor === "red") {
+        'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+}
+else if (buttonColor === 'red') {
     linkClass =
-      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800";
-  } else if (buttonColor === "yellow") {
+        'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+}
+else if (buttonColor === 'yellow') {
     linkClass =
-      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800";
-  } else if (buttonColor === "green") {
+        'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+}
+else if (buttonColor === 'green') {
     linkClass =
-      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800";
-  } else if (buttonColor === "indigo") {
+        'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+}
+else if (buttonColor === 'indigo') {
     linkClass =
-      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800";
-  } else if (buttonColor === "purple") {
+        'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+}
+else if (buttonColor === 'purple') {
     linkClass =
-      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800";
-  } else if (buttonColor === "pink") {
+        'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+}
+else if (buttonColor === 'pink') {
     linkClass =
-      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800";
-  } else {
+        'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+}
+else {
     linkClass =
-      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-  }
+        'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+}
 </script>
 
 <div
-  class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+	class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
 >
-  <div class="flex justify-end px-4 pt-4">
-    <button
-      id="dropdownButton"
-      on:click={toggleDropdown}
-      class="sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
-      type="button"
-    >
-      <svg
-        class="w-6 h-6"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-        ><path
-          d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
-        /></svg
-      >
-    </button>
+	<div class="flex justify-end px-4 pt-4">
+		<button
+			id="dropdownButton"
+			on:click={toggleDropdown}
+			class="sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+			type="button"
+		>
+			<svg
+				class="w-6 h-6"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+				/></svg
+			>
+		</button>
 
-    <div
-      id="dropdown"
-      class:hidden={isOpen}
-      class:block={!isOpen}
-      class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute"
-    >
-      <ul class="py-1" aria-labelledby="dropdownButton">
-        {#each dropdownLinks as { href, label, rel }}
-          <li>
-            <a
-              {href}
-              {rel}
-              class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              >{label}</a
-            >
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </div>
+		<div
+			id="dropdown"
+			class:hidden={isOpen}
+			class:block={!isOpen}
+			class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute"
+		>
+			<ul class="py-1" aria-labelledby="dropdownButton">
+				{#each dropdownLinks as { href, label, rel }}
+					<li>
+						<a
+							{href}
+							{rel}
+							class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+							>{label}</a
+						>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
 
-  <div class="flex flex-col items-center pb-10">
-    <img
-      class="mb-3 w-24 h-24 rounded-full shadow-lg"
-      src={img.src}
-      alt={img.alt}
-    />
-    <h3 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
-      {header}
-    </h3>
-    <span class="text-sm text-gray-500 dark:text-gray-400">{content}</span>
-    <div class="flex mt-4 space-x-3 lg:mt-6">
-      {#if link1.href}
-        <a href={link1.href} rel={link1.rel} class={linkClass}>{link1.title}</a>
-      {/if}
-      {#if link2.href}
-        <a
-          href={link2.href}
-          rel={link2.rel}
-          class="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800"
-          >{link2.title}</a
-        >
-      {/if}
-    </div>
-  </div>
+	<div class="flex flex-col items-center pb-10">
+		<img class="mb-3 w-24 h-24 rounded-full shadow-lg" src={img.src} alt={img.alt} />
+		<h3 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
+			{header}
+		</h3>
+		<span class="text-sm text-gray-500 dark:text-gray-400">{content}</span>
+		<div class="flex mt-4 space-x-3 lg:mt-6">
+			{#if link1.link}
+				<a href={link1.link} rel={link1.rel} class={linkClass}>{link1.name}</a>
+			{/if}
+			{#if link2.link}
+				<a
+					href={link2.link}
+					rel={link2.rel}
+					class="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800"
+					>{link2.name}</a
+				>
+			{/if}
+		</div>
+	</div>
 </div>

package/cards/InteractiveCard.svelte.d.ts

@@ -1,63 +1,23 @@
-/** @typedef {typeof __propDef.props}  InteractiveCardProps */
-/** @typedef {typeof __propDef.events}  InteractiveCardEvents */
-/** @typedef {typeof __propDef.slots}  InteractiveCardSlots */
-export default class InteractiveCard extends SvelteComponentTyped<{
-    header?: string;
-    img?: {
-        src: string;
-        alt: string;
-    };
-    dropdownLinks?: {
-        href: string;
-        label: string;
-    }[];
-    content?: string;
-    buttonColor?: string;
-    link1?: {
-        href: string;
-        title: string;
-        rel: string;
-    };
-    link2?: {
-        href: string;
-        title: string;
-        rel: string;
-    };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type InteractiveCardProps = typeof __propDef.props;
-export type InteractiveCardEvents = typeof __propDef.events;
-export type InteractiveCardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { DropdownLinkType, ImgType, LinkType } from '../types';
 declare const __propDef: {
     props: {
+        dropdownLinks: DropdownLinkType[];
+        img: ImgType;
         header?: string;
-        img?: {
-            src: string;
-            alt: string;
-        };
-        dropdownLinks?: {
-            href: string;
-            label: string;
-        }[];
         content?: string;
         buttonColor?: string;
-        link1?: {
-            href: string;
-            title: string;
-            rel: string;
-        };
-        link2?: {
-            href: string;
-            title: string;
-            rel: string;
-        };
+        link1: LinkType;
+        link2: LinkType;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type InteractiveCardProps = typeof __propDef.props;
+export declare type InteractiveCardEvents = typeof __propDef.events;
+export declare type InteractiveCardSlots = typeof __propDef.slots;
+export default class InteractiveCard extends SvelteComponentTyped<InteractiveCardProps, InteractiveCardEvents, InteractiveCardSlots> {
+}
 export {};

package/darkmode/DarkMode.svelte

@@ -1,78 +1,69 @@
-<script>
-  import { onMount } from "svelte";
-  export let btnClass =
-    "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50";
-
-  let mode;
-
-  const toggleTheme = () => {
+<script >import { onMount } from 'svelte';
+export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
+let mode;
+const toggleTheme = () => {
     // console.log("clicked theme icon");
-    if (localStorage.getItem("color-theme") === "dark") {
-      console.log("it's dark");
-      mode = "dark";
-      window.document.documentElement.classList.remove("dark");
-      window.document.documentElement.classList.add("light");
-      localStorage.setItem("color-theme", "light");
-    } else {
-      console.log("it's light");
-      mode = "light";
-      window.document.documentElement.classList.remove("light");
-      window.document.documentElement.classList.add("dark");
-      localStorage.setItem("color-theme", "dark");
+    if (localStorage.getItem('color-theme') === 'dark') {
+        // console.log("it's dark");
+        mode = 'dark';
+        window.document.documentElement.classList.remove('dark');
+        window.document.documentElement.classList.add('light');
+        localStorage.setItem('color-theme', 'light');
     }
-  };
-
-  onMount(() => {
-    let themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
-    let themeToggleLightIcon = document.getElementById(
-      "theme-toggle-light-icon"
-    );
-    if (
-      localStorage.getItem("color-theme") === "dark" ||
-      (!("color-theme" in localStorage) &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches)
-    ) {
-      document.documentElement.classList.add("dark");
-      themeToggleDarkIcon.classList.add("hidden");
-    } else {
-      document.documentElement.classList.remove("dark");
-      themeToggleLightIcon.classList.add("hidden");
+    else {
+        // console.log("it's light");
+        mode = 'light';
+        window.document.documentElement.classList.remove('light');
+        window.document.documentElement.classList.add('dark');
+        localStorage.setItem('color-theme', 'dark');
+    }
+};
+onMount(() => {
+    let themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+    let themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+    if (localStorage.getItem('color-theme') === 'dark' ||
+        (!('color-theme' in localStorage) &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+        themeToggleDarkIcon.classList.add('hidden');
+    }
+    else {
+        document.documentElement.classList.remove('dark');
+        themeToggleLightIcon.classList.add('hidden');
     }
-  });
+});
 </script>
 
 <button
-  on:click={toggleTheme}
-  aria-label="Dark mode"
-  id="theme-toggle"
-  type="button"
-  class={btnClass}
+	on:click={toggleTheme}
+	aria-label="Dark mode"
+	id="theme-toggle"
+	type="button"
+	class={btnClass}
 >
-  <svg
-    class:hidden={mode === "light"}
-    on:click={() => (mode = "dark")}
-    id="theme-toggle-dark-icon"
-    class="hidden w-5 h-5"
-    fill="currentColor"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-    ><path
-      d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
-    /></svg
-  >
+	<svg
+		class:hidden={mode === 'light'}
+		on:click={() => (mode = 'dark')}
+		id="theme-toggle-dark-icon"
+		class="hidden w-5 h-5"
+		fill="currentColor"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+		><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
+	>
 
-  <svg
-    class:hidden={mode === "dark"}
-    on:click={() => (mode = "light")}
-    id="theme-toggle-light-icon"
-    class="hidden w-5 h-5"
-    fill="currentColor"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-    ><path
-      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-    /></svg
-  >
+	<svg
+		class:hidden={mode === 'dark'}
+		on:click={() => (mode = 'light')}
+		id="theme-toggle-light-icon"
+		class="hidden w-5 h-5"
+		fill="currentColor"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+		><path
+			d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+		/></svg
+	>
 </button>

package/darkmode/DarkMode.svelte.d.ts

@@ -1,15 +1,3 @@
-/** @typedef {typeof __propDef.props}  DarkModeProps */
-/** @typedef {typeof __propDef.events}  DarkModeEvents */
-/** @typedef {typeof __propDef.slots}  DarkModeSlots */
-export default class DarkMode extends SvelteComponentTyped<{
-    btnClass?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DarkModeProps = typeof __propDef.props;
-export type DarkModeEvents = typeof __propDef.events;
-export type DarkModeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
@@ -20,4 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
+export declare type DarkModeProps = typeof __propDef.props;
+export declare type DarkModeEvents = typeof __propDef.events;
+export declare type DarkModeSlots = typeof __propDef.slots;
+export default class DarkMode extends SvelteComponentTyped<DarkModeProps, DarkModeEvents, DarkModeSlots> {
+}
 export {};

package/dropdowns/DropdownDefault.svelte.d.ts

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  DropdownDefaultEvents */
 /** @typedef {typeof __propDef.slots}  DropdownDefaultSlots */
 export default class DropdownDefault extends SvelteComponentTyped<{
+    label?: string;
     rounded?: boolean;
     textSize?: string;
     color?: string;
-    label?: string;
     items?: ({
         link: string;
         label: string;
@@ -27,10 +27,10 @@ export type DropdownDefaultSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        label?: string;
         rounded?: boolean;
         textSize?: string;
         color?: string;
-        label?: string;
         items?: ({
             link: string;
             label: string;

package/footer/LogoFooter.svelte

@@ -1,52 +1,36 @@
-<script>
-  export let site = {
-    link: "/",
-    name: "Flowbite Svelte",
-    img: "/images/mkdir-logo.png",
-  };
-
-  export let links = [
-    { name: "About", link: "/about", rel: undefined },
-    { name: "Privacy Policy", link: "/", rel: undefined },
-    { name: "Licensing", link: "/", rel: undefined },
-    { name: "Contact", link: "/", rel: undefined },
-  ];
-  export let footerClass =
-    "p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800";
-  export let divClass = "sm:flex sm:items-center sm:justify-between";
-  export let siteNameClass =
-    "self-center text-2xl font-semibold whitespace-nowrap dark:text-white";
-  export let ulClass =
-    "flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400";
-  export let aClass = "mr-4 hover:underline md:mr-6";
-  export let siteNameLinkClass = "flex items-center mb-4 sm:mb-0";
-  export let imgClass = "mr-3 h-8";
-  export let hrClass =
-    "my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8";
-  export let copyRightSpanClass =
-    "block text-sm text-gray-500 sm:text-center dark:text-gray-400";
-  export let copyRightLinkClass = "hover:underline";
-  export let copyrightYear = "© 2022";
-  export let allRightsReserved = "All Rights Reserved.";
+<script >export let site;
+export let links;
+export let footerClass = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
+export let divClass = 'sm:flex sm:items-center sm:justify-between';
+export let siteNameClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
+export let ulClass = 'flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400';
+export let aClass = 'mr-4 hover:underline md:mr-6';
+export let siteNameLinkClass = 'flex items-center mb-4 sm:mb-0';
+export let imgClass = 'mr-3 h-8';
+export let hrClass = 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8';
+export let copyRightSpanClass = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
+export let copyRightLinkClass = 'hover:underline';
+export let copyrightYear = '© 2022';
+export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
 <footer class={footerClass}>
-  <div class={divClass}>
-    <a href={site.link} class={siteNameLinkClass}>
-      <img src={site.img} class={imgClass} alt={site.name} />
-      <span class={siteNameClass}>{site.name}</span>
-    </a>
-    <ul class={ulClass}>
-      {#each links as { name, link, rel }}
-        <li>
-          <a href={link} {rel} class={aClass}>{name}</a>
-        </li>
-      {/each}
-    </ul>
-  </div>
-  <hr class={hrClass} />
-  <span class={copyRightSpanClass}
-    >{copyrightYear}
-    <a href={site.link} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
-  </span>
+	<div class={divClass}>
+		<a href={site.link} class={siteNameLinkClass}>
+			<img src={site.img} class={imgClass} alt={site.name} />
+			<span class={siteNameClass}>{site.name}</span>
+		</a>
+		<ul class={ulClass}>
+			{#each links as { name, link, rel }}
+				<li>
+					<a href={link} {rel} class={aClass}>{name}</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
+	<hr class={hrClass} />
+	<span class={copyRightSpanClass}
+		>{copyrightYear}
+		<a href={site.link} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
+	</span>
 </footer>

package/footer/LogoFooter.svelte.d.ts

@@ -1,65 +1,30 @@
-/** @typedef {typeof __propDef.props}  LogoFooterProps */
-/** @typedef {typeof __propDef.events}  LogoFooterEvents */
-/** @typedef {typeof __propDef.slots}  LogoFooterSlots */
-export default class LogoFooter extends SvelteComponentTyped<{
-    site?: {
-        link: string;
-        name: string;
-        img: string;
-    };
-    links?: {
-        name: string;
-        link: string;
-        rel: any;
-    }[];
-    footerClass?: string;
-    siteNameClass?: string;
-    ulClass?: string;
-    aClass?: string;
-    siteNameLinkClass?: string;
-    copyrightYear?: string;
-    allRightsReserved?: string;
-    divClass?: string;
-    imgClass?: string;
-    hrClass?: string;
-    copyRightSpanClass?: string;
-    copyRightLinkClass?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LogoFooterProps = typeof __propDef.props;
-export type LogoFooterEvents = typeof __propDef.events;
-export type LogoFooterSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { LinkType, SiteType } from '../types';
 declare const __propDef: {
     props: {
-        site?: {
-            link: string;
-            name: string;
-            img: string;
-        };
-        links?: {
-            name: string;
-            link: string;
-            rel: any;
-        }[];
+        site: SiteType;
+        links: LinkType[];
         footerClass?: string;
+        divClass?: string;
         siteNameClass?: string;
         ulClass?: string;
         aClass?: string;
         siteNameLinkClass?: string;
-        copyrightYear?: string;
-        allRightsReserved?: string;
-        divClass?: string;
         imgClass?: string;
         hrClass?: string;
         copyRightSpanClass?: string;
         copyRightLinkClass?: string;
+        copyrightYear?: string;
+        allRightsReserved?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type LogoFooterProps = typeof __propDef.props;
+export declare type LogoFooterEvents = typeof __propDef.events;
+export declare type LogoFooterSlots = typeof __propDef.slots;
+export default class LogoFooter extends SvelteComponentTyped<LogoFooterProps, LogoFooterEvents, LogoFooterSlots> {
+}
 export {};