flowbite-svelte 0.6.0

package/badges/Badge.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @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";
+declare const __propDef: {
+    props: {
+        textSize?: string;
+        name?: string;
+        color?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/badges/BadgeIcon.svelte

@@ -0,0 +1,31 @@
+<script>
+  export let textSize = "text-xs"; // text-sm
+  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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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 {
+    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}
+</span>

package/badges/BadgeIcon.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @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";
+declare const __propDef: {
+    props: {
+        textSize?: string;
+        name?: string;
+        color?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/badges/BadgeLink.svelte

@@ -0,0 +1,29 @@
+<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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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 {
+    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

@@ -0,0 +1,29 @@
+/** @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";
+declare const __propDef: {
+    props: {
+        link?: string;
+        textSize?: string;
+        name?: string;
+        color?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/buttongroups/ButtonGroup.svelte

@@ -0,0 +1,68 @@
+<script>
+  export let buttons = [
+    {
+      name: "Profile",
+      link: "/",
+      rel: "",
+      icon: "",
+    },
+    {
+      name: "Settings",
+      link: "/",
+      rel: "",
+      icon: "",
+    },
+    {
+      name: "Messages",
+      link: "/",
+      rel: "",
+      icon: "",
+    },
+  ];
+  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";
+  let classLast =
+    "inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md 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";
+</script>
+
+<div class="inline-flex rounded-md shadow-sm" role="group">
+  {#each buttons as { name, icon, link, rel }, 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/ButtonGroup.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  ButtonGroupProps */
+/** @typedef {typeof __propDef.events}  ButtonGroupEvents */
+/** @typedef {typeof __propDef.slots}  ButtonGroupSlots */
+export default class ButtonGroup extends SvelteComponentTyped<{
+    buttons?: {
+        name: string;
+        link: string;
+        rel: string;
+        icon: string;
+    }[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ButtonGroupProps = typeof __propDef.props;
+export type ButtonGroupEvents = typeof __propDef.events;
+export type ButtonGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        buttons?: {
+            name: string;
+            link: string;
+            rel: string;
+            icon: string;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/buttongroups/ButtonGroupOutline.svelte

@@ -0,0 +1,70 @@
+<script>
+  export let buttons = [
+    {
+      name: "Profile",
+      link: "/",
+      rel: "",
+      icon: "",
+    },
+    {
+      name: "Settings",
+      link: "/",
+      rel: "",
+      icon: "",
+    },
+    {
+      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";
+</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}
+</div>

package/buttongroups/ButtonGroupOutline.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @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";
+declare const __propDef: {
+    props: {
+        buttons?: {
+            name: string;
+            link: string;
+            rel: string;
+            icon: string;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/buttons/Button.svelte

@@ -0,0 +1,60 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  const handleClick = () => {
+    dispatch("handleClick");
+  };
+
+  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") {
+    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") {
+    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-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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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 {
+    // 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={handleClick}>{name}</button>

package/buttons/Button.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  ButtonProps */
+/** @typedef {typeof __propDef.events}  ButtonEvents */
+/** @typedef {typeof __propDef.slots}  ButtonSlots */
+export default class Button extends SvelteComponentTyped<{
+    rounded?: boolean;
+    textSize?: string;
+    name?: string;
+    type?: string;
+}, {
+    handleClick: CustomEvent<any>;
+} & {
+    [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";
+declare const __propDef: {
+    props: {
+        rounded?: boolean;
+        textSize?: string;
+        name?: string;
+        type?: string;
+    };
+    events: {
+        handleClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/buttons/ColorShadowButton.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  const handleClick = () => {
+    dispatch("handleClick");
+  };
+
+  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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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 {
+    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={handleClick}>{name}</button>

package/buttons/ColorShadowButton.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @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;
+}, {
+    handleClick: CustomEvent<any>;
+} & {
+    [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";
+declare const __propDef: {
+    props: {
+        textSize?: string;
+        name?: string;
+        color?: string;
+    };
+    events: {
+        handleClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/buttons/GradientDuotoneButton.svelte

@@ -0,0 +1,33 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  const handleClick = () => {
+    dispatch("handleClick");
+  };
+
+  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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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 {
+    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={handleClick}>{name}</button>

package/buttons/GradientDuotoneButton.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @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;
+}, {
+    handleClick: CustomEvent<any>;
+} & {
+    [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";
+declare const __propDef: {
+    props: {
+        textSize?: string;
+        name?: string;
+        color?: string;
+    };
+    events: {
+        handleClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/buttons/GradientMonochromeButton.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  const handleClick = () => {
+    dispatch("handleClick");
+  };
+
+  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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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 {
+    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={handleClick}>{name}</button>

package/buttons/GradientMonochromeButton.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @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;
+}, {
+    handleClick: CustomEvent<any>;
+} & {
+    [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";
+declare const __propDef: {
+    props: {
+        textSize?: string;
+        name?: string;
+        color?: string;
+    };
+    events: {
+        handleClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};