flowbite-svelte 0.9.0 → 0.9.1

package/buttongroups/ButtonGroupOutline.svelte

@@ -1,70 +1,58 @@
-<script>
-  export let buttons = [
+<script >export let buttons = [
     {
-      name: "Profile",
-      link: "/",
-      rel: "",
-      icon: "",
+        name: 'Profile',
+        link: '/'
     },
     {
-      name: "Settings",
-      link: "/",
-      rel: "",
-      icon: "",
+        name: 'Settings',
+        link: '/'
     },
     {
-      name: "Messages",
-      link: "/",
-      rel: "",
-      icon: "",
-    },
-  ];
-
-  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";
-  let classLast =
-    "inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent rounded-r-md 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";
+        name: 'Messages',
+        link: '/'
+    }
+];
+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';
+let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent rounded-r-md 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';
 </script>
 
 <div class="inline-flex rounded-md shadow-sm">
-  {#each buttons as { link, name, rel, icon }, i}
-    {#if i === 0}
-      <button type="button" class={classFirst}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{name}</a>
-        {:else}
-          {name}
-        {/if}
-      </button>
-    {:else if i === btnLength - 1}
-      <button type="button" class={classLast}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{name}</a>
-        {:else}
-          {name}
-        {/if}
-      </button>
-    {:else}
-      <button type="button" class={classMiddle}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{name}</a>
-        {:else}
-          {name}
-        {/if}
-      </button>
-    {/if}
-  {/each}
+	{#each buttons as { link, name, rel, icon }, i}
+		{#if i === 0}
+			<button type="button" class={classFirst}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if link}
+					<a href={link} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{:else if i === btnLength - 1}
+			<button type="button" class={classLast}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if link}
+					<a href={link} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{:else}
+			<button type="button" class={classMiddle}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if link}
+					<a href={link} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{/if}
+	{/each}
 </div>

package/buttongroups/ButtonGroupOutline.svelte.d.ts

@@ -1,33 +1,17 @@
-/** @typedef {typeof __propDef.props}  ButtonGroupOutlineProps */
-/** @typedef {typeof __propDef.events}  ButtonGroupOutlineEvents */
-/** @typedef {typeof __propDef.slots}  ButtonGroupOutlineSlots */
-export default class ButtonGroupOutline extends SvelteComponentTyped<{
-    buttons?: {
-        name: string;
-        link: string;
-        rel: string;
-        icon: string;
-    }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ButtonGroupOutlineProps = typeof __propDef.props;
-export type ButtonGroupOutlineEvents = typeof __propDef.events;
-export type ButtonGroupOutlineSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { ButtonGroupType } from '../types';
 declare const __propDef: {
     props: {
-        buttons?: {
-            name: string;
-            link: string;
-            rel: string;
-            icon: string;
-        }[];
+        buttons?: ButtonGroupType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type ButtonGroupOutlineProps = typeof __propDef.props;
+export declare type ButtonGroupOutlineEvents = typeof __propDef.events;
+export declare type ButtonGroupOutlineSlots = typeof __propDef.slots;
+export default class ButtonGroupOutline extends SvelteComponentTyped<ButtonGroupOutlineProps, ButtonGroupOutlineEvents, ButtonGroupOutlineSlots> {
+}
 export {};

package/buttons/Button.svelte

@@ -1,53 +1,66 @@
-<script>
-  export let rounded = false;
-  export let textSize = "text-sm";
-  export let name = "Read more";
-  export let type = "blue";
-
-  let paddings;
-  if (textSize === "text-xs") {
-    paddings = "py-2 px-3";
-  } else if (textSize === "text-sm") {
-    paddings = "py-2.5 px-5";
-  } else if (textSize === "text-base") {
-    paddings = "py-3 px-6";
-  } else {
-    paddings = "py-2.5 px-5";
-  }
-  let buttonClass;
-  let round = rounded ? "rounded-full" : "rounded-lg";
-
-  if (type === "blue") {
+<script >export let rounded = false;
+export let textSize = 'text-sm';
+export let name = 'Read more';
+export let type = 'blue';
+let paddings;
+if (textSize === 'text-xs') {
+    paddings = 'py-2 px-3';
+}
+else if (textSize === 'text-sm') {
+    paddings = 'py-2.5 px-5';
+}
+else if (textSize === 'text-base') {
+    paddings = 'py-3 px-6';
+}
+else {
+    paddings = 'py-2.5 px-5';
+}
+let buttonClass;
+let round = rounded ? 'rounded-full' : 'rounded-lg';
+if (type === 'blue') {
     buttonClass = `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
-  } else if (type === "blue-outline") {
+}
+else if (type === 'blue-outline') {
     buttonClass = `text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
-  } else if (type === "dark") {
+}
+else if (type === 'dark') {
     buttonClass =
-      buttonClass = `text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
-  } else if (type === "dark-outline") {
+        buttonClass = `text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
+}
+else if (type === 'dark-outline') {
     buttonClass = `text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
-  } else if (type === "light") {
+}
+else if (type === 'light') {
     buttonClass = `text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
-  } else if (type === "green") {
+}
+else if (type === 'green') {
     buttonClass = `text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
-  } else if (type === "green-outline") {
+}
+else if (type === 'green-outline') {
     buttonClass = `text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
-  } else if (type === "red") {
+}
+else if (type === 'red') {
     buttonClass = `text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
-  } else if (type === "red-outline") {
+}
+else if (type === 'red-outline') {
     buttonClass = `text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
-  } else if (type === "yellow") {
+}
+else if (type === 'yellow') {
     buttonClass = `text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:focus:ring-yellow-900`;
-  } else if (type === "yellow-outline") {
+}
+else if (type === 'yellow-outline') {
     buttonClass = `text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
-  } else if (type === "purple") {
+}
+else if (type === 'purple') {
     buttonClass = `text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium ${round} ${textSize} ${paddings} text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
-  } else if (type === "purple-outline") {
+}
+else if (type === 'purple-outline') {
     buttonClass = `text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
-  } else {
+}
+else {
     // blue
     buttonClass = `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
-  }
+}
 </script>
 
 <button type="button" class={buttonClass} on:click>{name}</button>

package/buttons/Button.svelte.d.ts

@@ -1,27 +1,11 @@
-/** @typedef {typeof __propDef.props}  ButtonProps */
-/** @typedef {typeof __propDef.events}  ButtonEvents */
-/** @typedef {typeof __propDef.slots}  ButtonSlots */
-export default class Button extends SvelteComponentTyped<{
-    textSize?: string;
-    name?: string;
-    rounded?: boolean;
-    type?: string;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { Buttontypes, Textsize } from '../types';
 declare const __propDef: {
     props: {
-        textSize?: string;
-        name?: string;
         rounded?: boolean;
-        type?: string;
+        textSize?: Textsize;
+        name?: string;
+        type?: Buttontypes;
     };
     events: {
         click: MouseEvent;
@@ -30,4 +14,9 @@ declare const __propDef: {
     };
     slots: {};
 };
+export declare type ButtonProps = typeof __propDef.props;
+export declare type ButtonEvents = typeof __propDef.events;
+export declare type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
 export {};

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