flowbite-svelte 0.8.8 → 0.9.2

package/buttons/ColorShadowButton.svelte

@@ -1,28 +1,34 @@
-<script>
-  export let textSize = "text-sm";
-  export let color = "blue";
-  export let name = "Read more";
-  let btnClass;
-
-  if (color === "blue") {
+<script >export let textSize = 'text-sm';
+export let color = 'blue';
+export let name = 'Read more';
+let btnClass;
+if (color === 'blue') {
     btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "green") {
+}
+else if (color === 'green') {
     btnClass = `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "cyan") {
+}
+else if (color === 'cyan') {
     btnClass = `text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "teal") {
+}
+else if (color === 'teal') {
     btnClass = `text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "lime") {
+}
+else if (color === 'lime') {
     btnClass = `text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800 shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "red") {
+}
+else if (color === 'red') {
     btnClass = `text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "pink") {
+}
+else if (color === 'pink') {
     btnClass = `text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "purple") {
+}
+else if (color === 'purple') {
     btnClass = `text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else {
+}
+else {
     btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  }
+}
 </script>
 
 <button type="button" class={btnClass} on:click>{name}</button>

package/buttons/ColorShadowButton.svelte.d.ts

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

package/buttons/GradientDuotoneButton.svelte

@@ -1,26 +1,31 @@
-<script>
-  export let textSize = "text-sm";
-  export let color = "purple2blue";
-  export let name = "Read more";
-  let btnClass;
-
-  if (color === "purple2blue") {
+<script >export let textSize = 'text-sm';
+export let color = 'purple2blue';
+export let name = 'Read more';
+let btnClass;
+if (color === 'purple2blue') {
     btnClass = `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "cyan2blue") {
+}
+else if (color === 'cyan2blue') {
     btnClass = `text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "green2blue") {
+}
+else if (color === 'green2blue') {
     btnClass = `text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "purple2pink") {
+}
+else if (color === 'purple2pink') {
     btnClass = `text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "pink2orange") {
+}
+else if (color === 'pink2orange') {
     btnClass = `text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "teal2lime") {
+}
+else if (color === 'teal2lime') {
     btnClass = `text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "red2yellow") {
+}
+else if (color === 'red2yellow') {
     btnClass = `text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else {
+}
+else {
     btnClass = `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  }
+}
 </script>
 
 <button type="button" class={btnClass} on:click>{name}</button>

package/buttons/GradientDuotoneButton.svelte.d.ts

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

package/buttons/GradientMonochromeButton.svelte

@@ -1,28 +1,34 @@
-<script>
-  export let textSize = "text-sm";
-  export let color = "blue";
-  export let name = "Read more";
-  let btnClass;
-
-  if (color === "blue") {
+<script >export let textSize = 'text-sm';
+export let color = 'blue';
+export let name = 'Read more';
+let btnClass;
+if (color === 'blue') {
     btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "green") {
+}
+else if (color === 'green') {
     btnClass = `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "cyan") {
+}
+else if (color === 'cyan') {
     btnClass = `text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "teal") {
+}
+else if (color === 'teal') {
     btnClass = `text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "lime") {
+}
+else if (color === 'lime') {
     btnClass = `text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "red") {
+}
+else if (color === 'red') {
     btnClass = `text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "pink") {
+}
+else if (color === 'pink') {
     btnClass = `text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else if (color === "purple") {
+}
+else if (color === 'purple') {
     btnClass = `text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  } else {
+}
+else {
     btnClass = `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-  }
+}
 </script>
 
 <button type="button" class={btnClass} on:click>{name}</button>

package/buttons/GradientMonochromeButton.svelte.d.ts

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

package/buttons/GradientOutlineButton.svelte

@@ -1,45 +1,50 @@
-<script>
-  export let textSize = "text-sm";
-  export let color = "purple2blue";
-  export let name = "Read more";
-  let btnClass;
-  let spanClass;
-
-  if (color === "purple2blue") {
+<script >export let textSize = 'text-sm';
+export let color = 'purple2blue';
+export let name = 'Read more';
+let btnClass;
+let spanClass;
+if (color === 'purple2blue') {
     btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800`;
     spanClass =
-      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
-  } else if (color === "cyan2blue") {
+        'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+}
+else if (color === 'cyan2blue') {
     btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:ring-cyan-200 dark:focus:ring-cyan-800`;
     spanClass =
-      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
-  } else if (color === "green2blue") {
+        'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+}
+else if (color === 'green2blue') {
     btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800`;
     spanClass =
-      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
-  } else if (color === "purple2pink") {
+        'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+}
+else if (color === 'purple2pink') {
     btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800`;
     spanClass =
-      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
-  } else if (color === "pink2orange") {
+        'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+}
+else if (color === 'pink2orange') {
     btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800`;
     spanClass =
-      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
-  } else if (color === "teal2lime") {
+        'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+}
+else if (color === 'teal2lime') {
     btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-lime-800`;
     spanClass =
-      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
-  } else if (color === "red2yellow") {
+        'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+}
+else if (color === 'red2yellow') {
     btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400`;
     spanClass =
-      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
-  } else {
+        'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+}
+else {
     btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800`;
     spanClass =
-      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
-  }
+        'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+}
 </script>
 
 <button class={btnClass}>
-  <span class={spanClass} on:click>{name}</span>
+	<span class={spanClass} on:click>{name}</span>
 </button>

package/buttons/GradientOutlineButton.svelte.d.ts

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

package/cards/Card.svelte

@@ -1,86 +1,88 @@
-<script>
-  export let link;
-  export let rel;
-  export let alt;
-  export let img;
-  export let btnLabel = "Read more";
-  export let btnColor = "blue";
-  export let header =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
-  let buttonClass;
-  if (btnColor === "blue") {
+<script >export let link;
+export let rel;
+export let alt;
+export let img;
+export let btnLabel = 'Read more';
+export let btnColor = 'blue';
+export let header = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+let buttonClass;
+if (btnColor === 'blue') {
     buttonClass =
-      "inline-flex items-center py-2 px-3 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 (btnColor === "gray") {
+        'inline-flex items-center py-2 px-3 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 (btnColor === 'gray') {
     buttonClass =
-      "inline-flex items-center py-2 px-3 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 (btnColor === "red") {
+        'inline-flex items-center py-2 px-3 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 (btnColor === 'red') {
     buttonClass =
-      "inline-flex items-center py-2 px-3 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 (btnColor === "yellow") {
+        'inline-flex items-center py-2 px-3 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 (btnColor === 'yellow') {
     buttonClass =
-      "inline-flex items-center py-2 px-3 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 (btnColor === "green") {
+        'inline-flex items-center py-2 px-3 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 (btnColor === 'green') {
     buttonClass =
-      "inline-flex items-center py-2 px-3 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 (btnColor === "indigo") {
+        'inline-flex items-center py-2 px-3 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 (btnColor === 'indigo') {
     buttonClass =
-      "inline-flex items-center py-2 px-3 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 (btnColor === "purple") {
+        'inline-flex items-center py-2 px-3 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 (btnColor === 'purple') {
     buttonClass =
-      "inline-flex items-center py-2 px-3 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 (btnColor === "pink") {
+        'inline-flex items-center py-2 px-3 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 (btnColor === 'pink') {
     buttonClass =
-      "inline-flex items-center py-2 px-3 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-3 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 {
     buttonClass =
-      "inline-flex items-center py-2 px-3 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-3 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"
 >
-  {#if img}
-    <a href={link} {rel}>
-      <img class="rounded-t-lg" src={img} {alt} />
-    </a>
-  {/if}
-  <div class="p-5">
-    {#if link}
-      <a href={link} {rel}>
-        <h5
-          class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
-        >
-          {header}
-        </h5>
-      </a>
-    {:else}
-      <h5
-        class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
-      >
-        {header}
-      </h5>
-    {/if}
+	{#if img}
+		<a href={link} {rel}>
+			<img class="rounded-t-lg" src={img} {alt} />
+		</a>
+	{/if}
+	<div class="p-5">
+		{#if link}
+			<a href={link} {rel}>
+				<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+					{header}
+				</h5>
+			</a>
+		{:else}
+			<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+				{header}
+			</h5>
+		{/if}
 
-    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
-      <slot />
-    </p>
-    {#if link}
-      <a href={link} {rel} class={buttonClass}>
-        {btnLabel}
-        <svg
-          class="ml-2 -mr-1 w-4 h-4"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-          ><path
-            fill-rule="evenodd"
-            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-            clip-rule="evenodd"
-          /></svg
-        >
-      </a>
-    {/if}
-  </div>
+		<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+			<slot />
+		</p>
+		{#if link}
+			<a href={link} {rel} class={buttonClass}>
+				{btnLabel}
+				<svg
+					class="ml-2 -mr-1 w-4 h-4"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						fill-rule="evenodd"
+						d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			</a>
+		{/if}
+	</div>
 </div>

package/cards/Card.svelte.d.ts

@@ -1,33 +1,14 @@
-/** @typedef {typeof __propDef.props}  CardProps */
-/** @typedef {typeof __propDef.events}  CardEvents */
-/** @typedef {typeof __propDef.slots}  CardSlots */
-export default class Card extends SvelteComponentTyped<{
-    link: any;
-    rel: any;
-    alt: any;
-    img: any;
-    header?: string;
-    btnLabel?: string;
-    btnColor?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type CardProps = typeof __propDef.props;
-export type CardEvents = typeof __propDef.events;
-export type CardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        link: any;
-        rel: any;
-        alt: any;
-        img: any;
-        header?: string;
+        link: string;
+        rel: string;
+        alt: string;
+        img: string;
         btnLabel?: string;
-        btnColor?: string;
+        btnColor?: Colors;
+        header?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -36,4 +17,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export declare type CardProps = typeof __propDef.props;
+export declare type CardEvents = typeof __propDef.events;
+export declare type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+}
 export {};