flowbite-svelte 0.9.1 → 0.9.2

package/accordions/AccordionItem.svelte

@@ -1,44 +1,41 @@
-<script>
-  import { getContext } from "svelte";
-  import collapse from "svelte-collapse";
-  import {
-    ChevronDownIconSolid,
-    ChevronUpIconSolid,
-  } from "@codewithshin/svelte-heroicons";
-  export let id;
-  const store = getContext("svelte-collapsible-accordion");
-  $: params = {
+<script >import { getContext } from 'svelte';
+import collapse from 'svelte-collapse';
+import { ChevronDownIconSolid, ChevronUpIconSolid } from '@codewithshin/svelte-heroicons';
+export let id;
+const store = getContext('svelte-collapsible-accordion');
+$: params = {
     open: $store.id === id,
     duration: $store.duration,
-    easing: $store.easing,
-  };
-  const handleToggle = () => {
+    easing: $store.easing
+};
+const handleToggle = () => {
     if (params.open) {
-      store.update((s) => Object.assign(s, { id: null }));
-    } else {
-      store.update((s) => Object.assign(s, { id }));
+        store.update((s) => Object.assign(s, { id: null }));
     }
-  };
+    else {
+        store.update((s) => Object.assign(s, { id }));
+    }
+};
 </script>
 
 <h2 aria-expanded={params.open}>
-  <button
-    on:click={handleToggle}
-    type="button"
-    class:rounded-t-xl={id === "1"}
-    class:border-t-0={id !== "1"}
-    class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
-  >
-    <span><slot name="header" /></span>
-    {#if params.open}
-      <ChevronUpIconSolid />
-    {:else}
-      <ChevronDownIconSolid />
-    {/if}
-  </button>
+	<button
+		on:click={handleToggle}
+		type="button"
+		class:rounded-t-xl={id === '1'}
+		class:border-t-0={id !== '1'}
+		class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+	>
+		<span><slot name="header" /></span>
+		{#if params.open}
+			<ChevronUpIconSolid />
+		{:else}
+			<ChevronDownIconSolid />
+		{/if}
+	</button>
 </h2>
 <div use:collapse={params}>
-  <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
-    <slot name="body" />
-  </div>
+	<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
+		<slot name="body" />
+	</div>
 </div>

package/accordions/AccordionItem.svelte.d.ts

@@ -1,22 +1,7 @@
-/** @typedef {typeof __propDef.props}  AccordionItemProps */
-/** @typedef {typeof __propDef.events}  AccordionItemEvents */
-/** @typedef {typeof __propDef.slots}  AccordionItemSlots */
-export default class AccordionItem extends SvelteComponentTyped<{
-    id: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    body: {};
-}> {
-}
-export type AccordionItemProps = typeof __propDef.props;
-export type AccordionItemEvents = typeof __propDef.events;
-export type AccordionItemSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id: any;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,4 +11,9 @@ declare const __propDef: {
         body: {};
     };
 };
+export declare type AccordionItemProps = typeof __propDef.props;
+export declare type AccordionItemEvents = typeof __propDef.events;
+export declare type AccordionItemSlots = typeof __propDef.slots;
+export default class AccordionItem extends SvelteComponentTyped<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
+}
 export {};

package/buttongroups/ButtonGroup.svelte

@@ -1,17 +1,4 @@
-<script >export let buttons = [
-    {
-        name: 'Profile',
-        link: '/'
-    },
-    {
-        name: 'Settings',
-        link: '/'
-    },
-    {
-        name: 'Messages',
-        link: '/'
-    }
-];
+<script >export let buttons;
 let btnLength = buttons.length;
 let classFirst = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
 let classMiddle = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';

package/buttongroups/ButtonGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { ButtonGroupType } from '../types';
 declare const __propDef: {
     props: {
-        buttons?: ButtonGroupType[];
+        buttons: ButtonGroupType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/buttongroups/ButtonGroupOutline.svelte

@@ -1,17 +1,4 @@
-<script >export let buttons = [
-    {
-        name: 'Profile',
-        link: '/'
-    },
-    {
-        name: 'Settings',
-        link: '/'
-    },
-    {
-        name: 'Messages',
-        link: '/'
-    }
-];
+<script >export let buttons;
 let btnLength = buttons.length;
 let classFirst = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent rounded-l-lg border border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
 let classMiddle = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent border-t border-b border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';

package/buttongroups/ButtonGroupOutline.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { ButtonGroupType } from '../types';
 declare const __propDef: {
     props: {
-        buttons?: ButtonGroupType[];
+        buttons: ButtonGroupType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/CtaCard.svelte

@@ -1,20 +1,7 @@
 <script >import Button from '../buttons/Button.svelte';
 export let title = 'Work fast from anywhere';
 export let headColor = 'gray';
-export let btns = [
-    {
-        textSize: 'text-base',
-        name: 'Download it',
-        type: 'blue',
-        link: '/about'
-    },
-    {
-        textSize: 'text-base',
-        name: 'Get in on',
-        type: 'red-outline',
-        link: '/'
-    }
-];
+export let btns;
 let headClass;
 if (headColor === 'blue') {
     headClass = 'mb-2 text-3xl font-bold text-blue-900 dark:text-white';
@@ -55,10 +42,12 @@ else {
 		<slot />
 	</p>
 	<div class="justify-center items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
-		{#each btns as { name, textSize, type, link, rel, rounded }}
-			<a href={link} {rel}>
-				<Button {name} {rounded} {type} {textSize} />
-			</a>
-		{/each}
+		{#if btns}
+			{#each btns as { name, textSize, type, link, rel, rounded }}
+				<a href={link} {rel}>
+					<Button {name} {rounded} {type} {textSize} />
+				</a>
+			{/each}
+		{/if}
 	</div>
 </div>

package/cards/CtaCard.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CardButton, Colors } from '../types';
+import type { CardButtonType, Colors } from '../types';
 declare const __propDef: {
     props: {
         title?: string;
         headColor?: Colors;
-        btns?: CardButton[];
+        btns: CardButtonType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/EcommerceCard.svelte

@@ -2,7 +2,7 @@
     src: '/images/product-1.png',
     alt: 'product image'
 };
-export let link = '/#';
+export let link = '/';
 export let btnColor = 'blue';
 export let rel;
 export let title = 'Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport';

package/cards/EcommerceCard.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CardImg, Colors } from '../types';
+import type { ImgType, Colors } from '../types';
 declare const __propDef: {
     props: {
-        img?: CardImg;
+        img?: ImgType;
         link?: string;
         btnColor?: Colors;
         rel: string;

package/cards/HorizontalCard.svelte

@@ -1,29 +1,26 @@
-<script>
-  export let link;
-  export let rel;
-  export let img = "/images/image-4.jpeg";
-  export let alt;
-  export let header = "Lorem ipsum dolor sit ametit.";
+<script >export let link;
+export let rel;
+export let img = '/images/image-4.jpeg';
+export let alt;
+export let header = 'Lorem ipsum dolor sit ametit.';
 </script>
 
 <a
-  href={link}
-  {rel}
-  class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
+	href={link}
+	{rel}
+	class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
 >
-  <img
-    class="object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
-    src={img}
-    {alt}
-  />
-  <div class="flex flex-col justify-between p-4 leading-normal">
-    <h5
-      class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
-    >
-      {header}
-    </h5>
-    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
-      <slot />
-    </p>
-  </div>
+	<img
+		class="object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
+		src={img}
+		{alt}
+	/>
+	<div class="flex flex-col justify-between p-4 leading-normal">
+		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+			{header}
+		</h5>
+		<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+			<slot />
+		</p>
+	</div>
 </a>

package/cards/HorizontalCard.svelte.d.ts

@@ -1,29 +1,11 @@
-/** @typedef {typeof __propDef.props}  HorizontalCardProps */
-/** @typedef {typeof __propDef.events}  HorizontalCardEvents */
-/** @typedef {typeof __propDef.slots}  HorizontalCardSlots */
-export default class HorizontalCard extends SvelteComponentTyped<{
-    link: any;
-    rel: any;
-    alt: any;
-    header?: string;
-    img?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type HorizontalCardProps = typeof __propDef.props;
-export type HorizontalCardEvents = typeof __propDef.events;
-export type HorizontalCardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        link: any;
-        rel: any;
-        alt: any;
-        header?: string;
+        link: string;
+        rel: string;
         img?: string;
+        alt: string;
+        header?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -32,4 +14,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export declare type HorizontalCardProps = typeof __propDef.props;
+export declare type HorizontalCardEvents = typeof __propDef.events;
+export declare type HorizontalCardSlots = typeof __propDef.slots;
+export default class HorizontalCard extends SvelteComponentTyped<HorizontalCardProps, HorizontalCardEvents, HorizontalCardSlots> {
+}
 export {};

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