flowbite-svelte 0.8.7 → 0.9.1

package/alerts/InfoAlert.svelte

@@ -1,125 +1,120 @@
-<script>
-  // use blue (default), red, green, yellow, and gray
-  export let color = "blue";
-  export let alertId = "alert-additional-content-1";
-  export let infoLink = false;
-  export let closeBtn = false;
-  let hidden = false;
-  const handleHide = () => {
+<script >export let color = 'blue';
+export let alertId = 'alert-additional-content-1';
+export let infoLink = undefined;
+export let closeBtn = false;
+let hidden = false;
+const handleHide = () => {
     hidden = !hidden;
-  };
-
-  let divClass;
-  let svgClass;
-  let slotClass;
-  let buttonClass;
-
-  if (color === "blue") {
-    divClass = "p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
-    svgClass = "mr-2 w-5 h-5 text-blue-700 dark:text-blue-800";
-    slotClass = "mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800";
+};
+let divClass;
+let svgClass;
+let slotClass;
+let buttonClass;
+if (color === 'blue') {
+    divClass = 'p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
+    svgClass = 'mr-2 w-5 h-5 text-blue-700 dark:text-blue-800';
+    slotClass = 'mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800';
     buttonClass =
-      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900";
-  } else if (color === "gray") {
-    divClass = "p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200";
-    svgClass = "mr-2 w-5 h-5 text-gray-700 dark:text-gray-800";
-    slotClass = "mt-2 mb-4 text-sm text-gray-700 dark:text-gray-800";
+        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900';
+}
+else if (color === 'gray') {
+    divClass = 'p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200';
+    svgClass = 'mr-2 w-5 h-5 text-gray-700 dark:text-gray-800';
+    slotClass = 'mt-2 mb-4 text-sm text-gray-700 dark:text-gray-800';
     buttonClass =
-      "text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-gray-800 dark:hover:bg-gray-900";
-  } else if (color === "red") {
-    divClass = "p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200";
-    svgClass = "mr-2 w-5 h-5 text-red-700 dark:text-red-800";
-    slotClass = "mt-2 mb-4 text-sm text-red-700 dark:text-red-800";
+        'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-gray-800 dark:hover:bg-gray-900';
+}
+else if (color === 'red') {
+    divClass = 'p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200';
+    svgClass = 'mr-2 w-5 h-5 text-red-700 dark:text-red-800';
+    slotClass = 'mt-2 mb-4 text-sm text-red-700 dark:text-red-800';
     buttonClass =
-      "text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900";
-  } else if (color === "yellow") {
-    divClass = "p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200";
-    svgClass = "mr-2 w-5 h-5 text-yellow-700 dark:text-yellow-800";
-    slotClass = "mt-2 mb-4 text-sm text-yellow-700 dark:text-yellow-800";
+        'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900';
+}
+else if (color === 'yellow') {
+    divClass = 'p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200';
+    svgClass = 'mr-2 w-5 h-5 text-yellow-700 dark:text-yellow-800';
+    slotClass = 'mt-2 mb-4 text-sm text-yellow-700 dark:text-yellow-800';
     buttonClass =
-      "text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-yellow-800 dark:hover:bg-yellow-900";
-  } else if (color === "green") {
-    divClass = "p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200";
-    svgClass = "mr-2 w-5 h-5 text-green-700 dark:text-green-800";
-    slotClass = "mt-2 mb-4 text-sm text-green-700 dark:text-green-800";
+        'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-yellow-800 dark:hover:bg-yellow-900';
+}
+else if (color === 'green') {
+    divClass = 'p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200';
+    svgClass = 'mr-2 w-5 h-5 text-green-700 dark:text-green-800';
+    slotClass = 'mt-2 mb-4 text-sm text-green-700 dark:text-green-800';
     buttonClass =
-      "text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-green-800 dark:hover:bg-green-900";
-  } else if (color === "indigo") {
-    divClass = "p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200";
-    svgClass = "mr-2 w-5 h-5 text-indigo-700 dark:text-indigo-800";
-    slotClass = "mt-2 mb-4 text-sm text-indigo-700 dark:text-indigo-800";
+        'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-green-800 dark:hover:bg-green-900';
+}
+else if (color === 'indigo') {
+    divClass = 'p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200';
+    svgClass = 'mr-2 w-5 h-5 text-indigo-700 dark:text-indigo-800';
+    slotClass = 'mt-2 mb-4 text-sm text-indigo-700 dark:text-indigo-800';
     buttonClass =
-      "text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-indigo-800 dark:hover:bg-indigo-900";
-  } else if (color === "purple") {
-    divClass = "p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200";
-    svgClass = "mr-2 w-5 h-5 text-purple-700 dark:text-purple-800";
-    slotClass = "mt-2 mb-4 text-sm text-purple-700 dark:text-purple-800";
+        'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-indigo-800 dark:hover:bg-indigo-900';
+}
+else if (color === 'purple') {
+    divClass = 'p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200';
+    svgClass = 'mr-2 w-5 h-5 text-purple-700 dark:text-purple-800';
+    slotClass = 'mt-2 mb-4 text-sm text-purple-700 dark:text-purple-800';
     buttonClass =
-      "text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-purple-800 dark:hover:bg-purple-900";
-  } else if (color === "pink") {
-    divClass = "p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200";
-    svgClass = "mr-2 w-5 h-5 text-pink-700 dark:text-pink-800";
-    slotClass = "mt-2 mb-4 text-sm text-pink-700 dark:text-pink-800";
+        'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-purple-800 dark:hover:bg-purple-900';
+}
+else if (color === 'pink') {
+    divClass = 'p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200';
+    svgClass = 'mr-2 w-5 h-5 text-pink-700 dark:text-pink-800';
+    slotClass = 'mt-2 mb-4 text-sm text-pink-700 dark:text-pink-800';
     buttonClass =
-      "text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-pink-800 dark:hover:bg-pink-900";
-  } else {
-    divClass = "p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
-    svgClass = "mr-2 w-5 h-5 text-blue-700 dark:text-blue-800";
-    slotClass = "mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800";
+        'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-pink-800 dark:hover:bg-pink-900';
+}
+else {
+    divClass = 'p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
+    svgClass = 'mr-2 w-5 h-5 text-blue-700 dark:text-blue-800';
+    slotClass = 'mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800';
     buttonClass =
-      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900";
-  }
+        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900';
+}
 </script>
 
 <div id={alertId} class:hidden class={divClass} role="alert">
-  <div class="flex items-center">
-    <svg
-      class={svgClass}
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-      ><path
-        fill-rule="evenodd"
-        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-        clip-rule="evenodd"
-      /></svg
-    >
-    <h3 class="text-lg font-medium text-{color}-700 dark:text-{color}-800">
-      <slot name="header">No header was provided</slot>
-    </h3>
-  </div>
-  <div class={slotClass}>
-    <slot>No content was provided.</slot>
-  </div>
-  <div class="flex">
-    {#if infoLink}
-      <button
-        type="button"
-        class="text-white bg-{color}-700 hover:bg-{color}-800 focus:ring-4 focus:ring-{color}-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-{color}-800 dark:hover:bg-{color}-900"
-      >
-        <svg
-          class="-ml-0.5 mr-2 h-4 w-4"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-          ><path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /><path
-            fill-rule="evenodd"
-            d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
-            clip-rule="evenodd"
-          /></svg
-        >
-        <a href={infoLink} rel="external">View more</a>
-      </button>
-    {/if}
-    {#if closeBtn}
-      <button
-        on:click={handleHide}
-        type="button"
-        class="text-{color}-700 bg-transparent border border-{color}-700 hover:bg-{color}-800 hover:text-white focus:ring-4 focus:ring-{color}-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:border-{color}-800 dark:text-{color}-800 dark:hover:text-white"
-        aria-label="Close"
-      >
-        Dismiss
-      </button>
-    {/if}
-  </div>
+	<div class="flex items-center">
+		<svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+				clip-rule="evenodd"
+			/></svg
+		>
+		<h3 class="text-lg font-medium text-{color}-700 dark:text-{color}-800">
+			<slot name="header">No header was provided</slot>
+		</h3>
+	</div>
+	<div class={slotClass}>
+		<slot>No content was provided.</slot>
+	</div>
+	<div class="flex">
+		{#if infoLink}
+			<button
+				type="button"
+				class="text-white bg-{color}-700 hover:bg-{color}-800 focus:ring-4 focus:ring-{color}-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-{color}-800 dark:hover:bg-{color}-900"
+			>
+				<svg
+					class="-ml-0.5 mr-2 h-4 w-4"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /><path
+						fill-rule="evenodd"
+						d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+						clip-rule="evenodd"
+					/></svg
+				>
+				<a href={infoLink} rel="external">View more</a>
+			</button>
+		{/if}
+		{#if closeBtn}
+			<button on:click={handleHide} type="button" class={buttonClass} aria-label="Close">
+				Dismiss
+			</button>
+		{/if}
+	</div>
 </div>

package/alerts/InfoAlert.svelte.d.ts

@@ -1,28 +1,11 @@
-/** @typedef {typeof __propDef.props}  InfoAlertProps */
-/** @typedef {typeof __propDef.events}  InfoAlertEvents */
-/** @typedef {typeof __propDef.slots}  InfoAlertSlots */
-export default class InfoAlert extends SvelteComponentTyped<{
-    color?: string;
-    alertId?: string;
-    closeBtn?: boolean;
-    infoLink?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    default: {};
-}> {
-}
-export type InfoAlertProps = typeof __propDef.props;
-export type InfoAlertEvents = typeof __propDef.events;
-export type InfoAlertSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        color?: string;
+        color?: Colors;
         alertId?: string;
+        infoLink?: string;
         closeBtn?: boolean;
-        infoLink?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -32,4 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export declare type InfoAlertProps = typeof __propDef.props;
+export declare type InfoAlertEvents = typeof __propDef.events;
+export declare type InfoAlertSlots = typeof __propDef.slots;
+export default class InfoAlert extends SvelteComponentTyped<InfoAlertProps, InfoAlertEvents, InfoAlertSlots> {
+}
 export {};

package/badges/Badge.svelte

@@ -1,28 +1,34 @@
-<script>
-  export let textSize = "text-xs"; // text-sm
-  export let name = "Read more";
-  export let color = "blue";
-
-  let badgeClass;
-  if (color === "blue") {
+<script >export let textSize = 'text-xs';
+export let name = 'Read more';
+export let color = 'blue';
+let badgeClass;
+if (color === 'blue') {
     badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800`;
-  } else if (color === "gray") {
+}
+else if (color === 'gray') {
     badgeClass = `bg-gray-100 text-gray-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300`;
-  } else if (color === "red") {
+}
+else if (color === 'red') {
     badgeClass = `bg-red-100 text-red-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-900`;
-  } else if (color === "green") {
+}
+else if (color === 'green') {
     badgeClass = `bg-green-100 text-green-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-900`;
-  } else if (color === "yellow") {
+}
+else if (color === 'yellow') {
     badgeClass = `bg-yellow-100 text-yellow-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-900`;
-  } else if (color === "indigo") {
+}
+else if (color === 'indigo') {
     badgeClass = `bg-indigo-100 text-indigo-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-900`;
-  } else if (color === "purple") {
+}
+else if (color === 'purple') {
     badgeClass = `bg-purple-100 text-purple-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900`;
-  } else if (color === "pink") {
+}
+else if (color === 'pink') {
     badgeClass = `bg-pink-100 text-pink-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-900`;
-  } else {
+}
+else {
     badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800`;
-  }
+}
 </script>
 
 <span class={badgeClass}>{name}</span>

package/badges/Badge.svelte.d.ts

@@ -1,27 +1,19 @@
-/** @typedef {typeof __propDef.props}  BadgeProps */
-/** @typedef {typeof __propDef.events}  BadgeEvents */
-/** @typedef {typeof __propDef.slots}  BadgeSlots */
-export default class Badge extends SvelteComponentTyped<{
-    textSize?: string;
-    name?: string;
-    color?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type BadgeProps = typeof __propDef.props;
-export type BadgeEvents = typeof __propDef.events;
-export type BadgeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { Colors, Textsize } from '../types';
 declare const __propDef: {
     props: {
-        textSize?: string;
+        textSize?: Textsize;
         name?: string;
-        color?: string;
+        color?: Colors;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type BadgeProps = typeof __propDef.props;
+export declare type BadgeEvents = typeof __propDef.events;
+export declare type BadgeSlots = typeof __propDef.slots;
+export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
+}
 export {};

package/badges/BadgeIcon.svelte

@@ -1,31 +1,37 @@
-<script>
-  export let textSize = "text-xs"; // text-sm
-  export let name = "Read more";
-  export let color = "blue";
-
-  let badgeClass;
-  if (color === "blue") {
+<script >export let textSize = 'text-xs';
+export let name = 'Read more';
+export let color = 'blue';
+let badgeClass;
+if (color === 'blue') {
     badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-blue-700 dark:text-blue-300`;
-  } else if (color === "gray") {
+}
+else if (color === 'gray') {
     badgeClass = `bg-gray-100 text-gray-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-gray-700 dark:text-gray-300`;
-  } else if (color === "red") {
+}
+else if (color === 'red') {
     badgeClass = `bg-red-100 text-red-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-red-700 dark:text-red-300`;
-  } else if (color === "green") {
+}
+else if (color === 'green') {
     badgeClass = `bg-green-100 text-green-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-green-700 dark:text-green-300`;
-  } else if (color === "yellow") {
+}
+else if (color === 'yellow') {
     badgeClass = `bg-yellow-100 text-yellow-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-yellow-700 dark:text-yellow-300`;
-  } else if (color === "indigo") {
+}
+else if (color === 'indigo') {
     badgeClass = `bg-indigo-100 text-indigo-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-indigo-700 dark:text-indigo-300`;
-  } else if (color === "purple") {
+}
+else if (color === 'purple') {
     badgeClass = `bg-purple-100 text-purple-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-purple-700 dark:text-purple-300`;
-  } else if (color === "pink") {
+}
+else if (color === 'pink') {
     badgeClass = `bg-pink-100 text-pink-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-pink-700 dark:text-pink-300`;
-  } else {
+}
+else {
     badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-blue-700 dark:text-blue-300`;
-  }
+}
 </script>
 
 <span class={badgeClass}>
-  <slot />
-  {name}
+	<slot />
+	{name}
 </span>

package/badges/BadgeIcon.svelte.d.ts

@@ -1,25 +1,10 @@
-/** @typedef {typeof __propDef.props}  BadgeIconProps */
-/** @typedef {typeof __propDef.events}  BadgeIconEvents */
-/** @typedef {typeof __propDef.slots}  BadgeIconSlots */
-export default class BadgeIcon extends SvelteComponentTyped<{
-    textSize?: string;
-    name?: string;
-    color?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type BadgeIconProps = typeof __propDef.props;
-export type BadgeIconEvents = typeof __propDef.events;
-export type BadgeIconSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { Colors, Textsize } from '../types';
 declare const __propDef: {
     props: {
-        textSize?: string;
+        textSize?: Textsize;
         name?: string;
-        color?: string;
+        color?: Colors;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -28,4 +13,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export declare type BadgeIconProps = typeof __propDef.props;
+export declare type BadgeIconEvents = typeof __propDef.events;
+export declare type BadgeIconSlots = typeof __propDef.slots;
+export default class BadgeIcon extends SvelteComponentTyped<BadgeIconProps, BadgeIconEvents, BadgeIconSlots> {
+}
 export {};

package/badges/BadgeLink.svelte

@@ -1,29 +1,35 @@
-<script>
-  export let textSize = "text-xs"; // text-sm
-  export let name = "Read more";
-  export let color = "blue";
-  export let link = "/";
-
-  let badgeClass;
-  if (color === "blue") {
+<script >export let textSize = 'text-xs';
+export let name = 'Read more';
+export let color = 'blue';
+export let link = '/';
+let badgeClass;
+if (color === 'blue') {
     badgeClass = `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`;
-  } else if (color === "gray") {
+}
+else if (color === 'gray') {
     badgeClass = `bg-gray-100 hover:bg-gray-200 text-gray-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300`;
-  } else if (color === "red") {
+}
+else if (color === 'red') {
     badgeClass = `bg-red-100 hover:bg-red-200 text-red-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800 dark:hover:bg-red-300`;
-  } else if (color === "green") {
+}
+else if (color === 'green') {
     badgeClass = `bg-green-100 hover:bg-green-200 text-green-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800 dark:hover:bg-green-300`;
-  } else if (color === "yellow") {
+}
+else if (color === 'yellow') {
     badgeClass = `bg-yellow-100 hover:bg-yellow-200 text-yellow-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800 dark:hover:bg-yellow-300`;
-  } else if (color === "indigo") {
+}
+else if (color === 'indigo') {
     badgeClass = `bg-indigo-100 hover:bg-indigo-200 text-indigo-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-800 dark:hover:bg-indigo-300`;
-  } else if (color === "purple") {
+}
+else if (color === 'purple') {
     badgeClass = `bg-purple-100 hover:bg-purple-200 text-purple-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-800 dark:hover:bg-purple-300`;
-  } else if (color === "pink") {
+}
+else if (color === 'pink') {
     badgeClass = `bg-pink-100 hover:bg-pink-200 text-pink-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-800 dark:hover:bg-pink-300`;
-  } else {
+}
+else {
     badgeClass = `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`;
-  }
+}
 </script>
 
 <a href={link} class={badgeClass}>{name}</a>

package/badges/BadgeLink.svelte.d.ts

@@ -1,29 +1,20 @@
-/** @typedef {typeof __propDef.props}  BadgeLinkProps */
-/** @typedef {typeof __propDef.events}  BadgeLinkEvents */
-/** @typedef {typeof __propDef.slots}  BadgeLinkSlots */
-export default class BadgeLink extends SvelteComponentTyped<{
-    link?: string;
-    textSize?: string;
-    name?: string;
-    color?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type BadgeLinkProps = typeof __propDef.props;
-export type BadgeLinkEvents = typeof __propDef.events;
-export type BadgeLinkSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { Colors, Textsize } from '../types';
 declare const __propDef: {
     props: {
-        link?: string;
-        textSize?: string;
+        textSize?: Textsize;
         name?: string;
-        color?: string;
+        color?: Colors;
+        link?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type BadgeLinkProps = typeof __propDef.props;
+export declare type BadgeLinkEvents = typeof __propDef.events;
+export declare type BadgeLinkSlots = typeof __propDef.slots;
+export default class BadgeLink extends SvelteComponentTyped<BadgeLinkProps, BadgeLinkEvents, BadgeLinkSlots> {
+}
 export {};