flowbite-svelte 0.44.10 → 0.44.12

package/src/lib/badges/Badge.svelte

@@ -1,108 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, type ComponentProps } from 'svelte';
-  import { twMerge, twJoin } from 'tailwind-merge';
-  import CloseButton from '../utils/CloseButton.svelte';
-  import { fade } from 'svelte/transition';
-  import Frame from '$lib/utils/Frame.svelte';
-  import type { Dismissable } from '$lib/types';
-
-  interface $$Props extends Omit<ComponentProps<Frame>, 'color'>, Dismissable {
-    color?: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none';
-    large?: boolean;
-  }
-
-  export let color: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'primary';
-  export let large: boolean = false;
-  export let dismissable: boolean = false;
-
-  const colors = {
-    primary: 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300',
-    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
-    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-    gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-    red: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
-    green: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
-    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
-    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
-    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
-    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
-    none: ''
-  };
-
-  const borderedColors = {
-    primary: 'bg-primary-100 text-primary-800 dark:bg-gray-700 dark:text-primary-400 border-primary-400 dark:border-primary-400',
-    blue: 'bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border-blue-400 dark:border-blue-400',
-    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-500 dark:border-gray-500',
-    red: 'bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border-red-400 dark:border-red-400',
-    green: 'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border-green-400 dark:border-green-400',
-    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-300',
-    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border-indigo-400 dark:border-indigo-400',
-    purple: 'bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border-purple-400 dark:border-purple-400',
-    pink: 'bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border-pink-400 dark:border-pink-400',
-    none: ''
-  };
-
-  const hoverColors = {
-    primary: 'hover:bg-primary-200',
-    blue: 'hover:bg-blue-200',
-    dark: 'hover:bg-gray-200',
-    red: 'hover:bg-red-200',
-    green: 'hover:bg-green-200',
-    yellow: 'hover:bg-yellow-200',
-    indigo: 'hover:bg-indigo-200',
-    purple: 'hover:bg-purple-200',
-    pink: 'hover:bg-pink-200',
-    none: ''
-  };
-
-  const baseClass: string = 'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
-
-  let badgeClass: string;
-  $: badgeClass = twMerge(baseClass, large ? 'text-sm' : 'text-xs', $$restProps.border ? `border ${borderedColors[color]}` : colors[color], $$restProps.href && hoverColors[color], $$restProps.rounded ? 'rounded-full' : 'rounded', $$props.class);
-
-  // only overwrite necessary colors (<CloseButton> v0.29.10)
-  const closeBtnColors = {
-    primary: 'text-primary-400 hover:text-primary-900 dark:hover:bg-primary-800 dark:hover:text-primary-300',
-    blue: 'text-blue-400 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300',
-    dark: 'text-gray-400 hover:text-gray-400 hover:bg-gray-600 dark:hover:text-gray-300',
-    red: 'text-red-400 hover:text-red-900 dark:hover:bg-red-800 dark:hover:text-red-300',
-    green: 'text-green-400 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300',
-    yellow: 'text-yellow-400 hover:text-yellow-900 dark:hover:bg-yellow-800 dark:hover:text-yellow-300',
-    indigo: 'text-indigo-400 hover:text-indigo-900 dark:hover:bg-indigo-800 dark:hover:text-indigo-300',
-    purple: 'text-purple-400 hover:text-purple-900 dark:hover:bg-purple-800 dark:hover:text-purple-300',
-    pink: 'text-pink-400 hover:text-pink-900 dark:hover:bg-pink-800 dark:hover:text-pink-300',
-    none: ''
-  };
-
-  $: {
-    if (dismissable) $$restProps.transition = $$restProps.transition ?? fade;
-  }
-
-  let open = true;
-  const dispatch = createEventDispatcher();
-  $: dispatch(open ? 'open' : 'close');
-  const close = (e: MouseEvent) => {
-    e.stopPropagation();
-    open = false;
-  };
-</script>
-
-{#if open}
-  <Frame {...$$restProps} class={badgeClass}>
-    <slot />
-    {#if dismissable}
-      <slot name="close-button" {close}>
-        <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ml-1.5 -mr-1.5" />
-      </slot>
-    {/if}
-  </Frame>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'primary';
-@prop export let large: boolean = false;
-@prop export let dismissable: boolean = false;
--->

package/src/lib/banner/Banner.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import CloseButton from '../utils/CloseButton.svelte';
-  import { createEventDispatcher } from 'svelte';
-
-  export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
-  export let dismissable: boolean = true;
-  export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
-  export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
-  export let innerClass: string = 'flex';
-
-  let open = true;
-  const dispatch = createEventDispatcher();
-  $: dispatch(open ? 'open' : 'close');
-
-  const divClasses = {
-    default: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
-    bottom: 'bottom-0 left-0 w-full border-t border-gray-200 bg-gray-50',
-    cta: 'flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl left-1/2 top-6',
-    signup: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
-    info: 'top-0 left-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50'
-  };
-
-  const insideDivClasses = {
-    default: 'items-center mx-auto',
-    bottom: 'items-center mx-auto',
-    cta: 'flex-col items-start mb-3 mr-4 md:items-center md:flex-row md:mb-0',
-    signup: 'items-center flex-shrink-0 w-full mx-auto sm:w-auto',
-    info: 'items-center flex-shrink-0'
-  };
-
-  $: divClass = twMerge(position, divClass, divClasses[bannerType], $$props.classDiv);
-  $: div2Class = twMerge(innerClass, insideDivClasses[bannerType], $$props.classInner);
-
-  function close(e: MouseEvent) {
-    e.preventDefault();
-    open = false;
-  }
-</script>
-
-{#if open}
-  <div tabindex="-1" class={divClass} {...$$restProps}>
-    <slot name="header" />
-    <div class={div2Class}>
-      <slot />
-    </div>
-    {#if dismissable}
-      <div class="flex items-center">
-        <CloseButton class="-mx-1.5 -my-1.5" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
-      </div>
-    {/if}
-  </div>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
-@prop export let dismissable: boolean = true;
-@prop export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
-@prop export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
-@prop export let innerClass: string = 'flex';
--->

package/src/lib/bottom-nav/BottomNav.svelte

@@ -1,76 +0,0 @@
-<script lang="ts" context="module">
-  export type BottomNavType = {
-    activeClass: string;
-  };
-</script>
-
-<script lang="ts">
-  import { setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { twMerge } from 'tailwind-merge';
-
-  export let activeUrl: string = '';
-  export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
-  export let navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = 'default';
-  export let outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
-  export let innerClass: string = 'grid h-full max-w-lg mx-auto';
-  export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
-  // export let activeUrl: string = '';
-  let activeCls = '';
-
-  const activeUrlStore = writable('');
-
-  activeCls = twMerge(activeClass, $$props.classActive);
-  setContext('navType', navType);
-  setContext<BottomNavType>('bottomNavType', { activeClass: activeCls });
-
-  $: {
-    activeUrlStore.set(activeUrl);
-  }
-  setContext('activeUrl', activeUrlStore);
-
-  const outerDivClasses = {
-    default: 'bottom-0 left-0 h-16 bg-white border-t',
-    border: 'bottom-0 left-0 h-16 bg-white border-t',
-    application: 'h-16 max-w-lg -translate-x-1/2 bg-white border rounded-full bottom-4 left-1/2',
-    pagination: 'bottom-0 h-16 -translate-x-1/2 bg-white border-t left-1/2',
-    group: 'bottom-0 -translate-x-1/2 bg-white border-t left-1/2',
-    card: 'bottom-0 left-0 h-16 bg-white border-t',
-    meeting: 'bottom-0 left-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
-    video: 'bottom-0 left-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3'
-  };
-
-  const innerDivClasses = {
-    default: '',
-    border: '',
-    application: '',
-    pagination: '',
-    group: '',
-    card: '',
-    meeting: 'flex items-center justify-center mx-auto',
-    video: 'flex items-center w-full'
-  };
-
-  $: outerCls = twMerge(position, outerClass, outerDivClasses[navType], $$props.classOuter);
-  $: innerCls = twMerge(innerClass, innerDivClasses[navType], $$props.classInner);
-</script>
-
-<div {...$$restProps} class={outerCls}>
-  <slot name="header" />
-  <div class={innerCls}>
-    <slot />
-  </div>
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let activeUrl: string = '';
-@prop export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
-@prop export let navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = 'default';
-@prop export let outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
-@prop export let innerClass: string = 'grid h-full max-w-lg mx-auto';
-@prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
-@prop export let activeUrl: string = '';
--->

package/src/lib/bottom-nav/BottomNavHeader.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let outerClass: string = 'w-full';
-  export let innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
-</script>
-
-<div class={twMerge(outerClass, $$props.classOuter)} {...$$restProps}>
-  <div class={twMerge(innerClass, $$props.classInner)} role="group">
-    <slot />
-  </div>
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let outerClass: string = 'w-full';
-@prop export let innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
--->

package/src/lib/bottom-nav/BottomNavHeaderItem.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let itemName: string = '';
-  export let active: boolean = false;
-  export let defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
-  export let activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
-
-  $: btnClass = active ? activeClass : defaultClass;
-</script>
-
-<button class={twMerge(btnClass, $$props.class)} {...$$restProps} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
-  {itemName}
-</button>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let itemName: string = '';
-@prop export let active: boolean = false;
-@prop export let defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
-@prop export let activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
--->

package/src/lib/bottom-nav/BottomNavItem.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import type { ButtonClassesTypes } from '../types';
-  import type { BottomNavType } from './BottomNav.svelte';
-  import { twMerge } from 'tailwind-merge';
-
-  export let btnName: string = '';
-  export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
-  export let activeClass: string | undefined = undefined;
-  export let href: string = '';
-  export let exact: boolean = true;
-
-  const navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = getContext('navType');
-
-  const context = getContext<BottomNavType>('bottomNavType') ?? {};
-  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
-
-  let navUrl = '';
-  activeUrlStore.subscribe((value) => {
-    navUrl = value;
-  });
-
-  $: active = navUrl && exact ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
-  const btnClasses: ButtonClassesTypes = {
-    default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    border: 'inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
-    application: '',
-    pagination: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    group: 'inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    card: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    meeting: '',
-    video: ''
-  };
-
-  const spanClasses: ButtonClassesTypes = {
-    default: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
-    border: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
-    application: 'sr-only',
-    pagination: 'sr-only',
-    group: 'sr-only',
-    card: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
-    meeting: '',
-    video: ''
-  };
-
-  const appBtnClasses = {
-    left: 'inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
-  };
-  let btnClass: string;
-
-  // let active = navUrl ? href === navUrl : false;
-
-  $: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], active && (activeClass ?? context.activeClass), $$props.btnClass);
-
-  let spanClass: string;
-
-  $: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), $$props.spanClass);
-</script>
-
-<svelte:element this={href ? 'a' : 'button'} aria-label={btnName} {href} role={href ? 'link' : 'button'} {...$$restProps} class={btnClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
-  <slot />
-  <span class={spanClass}>{btnName}</span>
-</svelte:element>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let btnName: string = '';
-@prop export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
-@prop export let activeClass: string | undefined = undefined;
-@prop export let href: string = '';
-@prop export let exact: boolean = true;
--->

package/src/lib/breadcrumbs/Breadcrumb.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let solid: boolean = false;
-  export let navClass: string = 'flex';
-  export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
-  export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
-  let classNav: string = solid ? solidClass : navClass;
-</script>
-
-<nav aria-label="Breadcrumb" {...$$restProps} class={twMerge(classNav, $$props.class)}>
-  <ol class={twMerge(olClass, $$props.classOl)}>
-    <slot />
-  </ol>
-</nav>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let solid: boolean = false;
-@prop export let navClass: string = 'flex';
-@prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
-@prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
--->

package/src/lib/breadcrumbs/BreadcrumbItem.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let home: boolean = false;
-  export let href: string | undefined = undefined;
-  export let linkClass: string = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
-  export let spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
-  export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
-</script>
-
-<li class={twMerge('inline-flex items-center', $$props.class)} {...$$restProps}>
-  {#if home}
-    <a class={twMerge(homeClass, $$props.classHome)} {href}>
-      {#if $$slots.icon}
-        <slot name="icon" />
-      {:else}
-        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-        </svg>
-      {/if}
-      <slot />
-    </a>
-  {:else}
-    {#if $$slots.icon}
-      <slot name="icon" />
-    {:else}
-      <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-      </svg>
-    {/if}
-    {#if href}
-      <a class={twMerge(linkClass, $$props.classLink)} {href}>
-        <slot />
-      </a>
-    {:else}
-      <span class={twMerge(spanClass, $$props.classSpan)}>
-        <slot />
-      </span>
-    {/if}
-  {/if}
-</li>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let home: boolean = false;
-@prop export let href: string | undefined = undefined;
-@prop export let linkClass: string = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
-@prop export let spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
-@prop export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
--->

package/src/lib/buttongroups/ButtonGroup.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import { setContext } from 'svelte';
-  import { twMerge } from 'tailwind-merge';
-  import type { SizeType } from '$lib/types';
-
-  export let size: SizeType = 'md';
-  export let divClass: string = 'inline-flex rounded-lg shadow-sm';
-
-  setContext('group', { size });
-</script>
-
-<div {...$$restProps} class={twMerge(divClass, $$props.class)} role="group">
-  <slot />
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let size: SizeType = 'md';
-@prop export let divClass: string = 'inline-flex rounded-lg shadow-sm';
--->

package/src/lib/buttons/Button.svelte

@@ -1,100 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import { getContext } from 'svelte';
-  import type { ButtonType } from '../types';
-  import type { SizeType } from '$lib/types';
-
-  type ButtonColor = keyof typeof colorClasses;
-
-  const group: SizeType = getContext('group');
-
-  export let pill: boolean = false;
-  export let outline: boolean = false;
-  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
-  export let href: string | undefined = undefined;
-  export let type: ButtonType = 'button';
-  export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
-  export let shadow: boolean = false;
-
-  const colorClasses = {
-    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus:text-primary-700 dark:focus:text-white dark:hover:text-white',
-    blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
-    dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700',
-    green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700',
-    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600',
-    primary: 'text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700',
-    purple: 'text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700',
-    red: 'text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700',
-    yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 ',
-    none: ''
-  };
-
-  const coloredFocusClasses = {
-    alternative: 'focus:ring-gray-200 dark:focus:ring-gray-700',
-    blue: 'focus:ring-blue-300 dark:focus:ring-blue-800',
-    dark: 'focus:ring-gray-300 dark:focus:ring-gray-700',
-    green: 'focus:ring-green-300 dark:focus:ring-green-800',
-    light: 'focus:ring-gray-200 dark:focus:ring-gray-700',
-    primary: 'focus:ring-primary-300 dark:focus:ring-primary-800',
-    purple: 'focus:ring-purple-300 dark:focus:ring-purple-900',
-    red: 'focus:ring-red-300 dark:focus:ring-red-900',
-    yellow: 'focus:ring-yellow-300 dark:focus:ring-yellow-900',
-    none: ''
-  };
-
-  const coloredShadowClasses = {
-    alternative: 'shadow-gray-500/50 dark:shadow-gray-800/80',
-    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
-    dark: 'shadow-gray-500/50 dark:shadow-gray-800/80',
-    green: 'shadow-green-500/50 dark:shadow-green-800/80',
-    light: 'shadow-gray-500/50 dark:shadow-gray-800/80',
-    primary: 'shadow-primary-500/50 dark:shadow-primary-800/80',
-    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
-    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
-    yellow: 'shadow-yellow-500/50 dark:shadow-yellow-800/80 ',
-    none: ''
-  };
-
-  const outlineClasses = {
-    alternative: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white focus:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
-    blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600',
-    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600',
-    light: 'text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600',
-    primary: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600',
-    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500',
-    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600',
-    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400',
-    none: ''
-  };
-
-  const sizeClasses = {
-    xs: 'px-3 py-2 text-xs',
-    sm: 'px-4 py-2 text-sm',
-    md: 'px-5 py-2.5 text-sm',
-    lg: 'px-5 py-3 text-base',
-    xl: 'px-6 py-3.5 text-base'
-  };
-
-  const hasBorder = () => outline || color === 'alternative' || color === 'light';
-
-  let buttonClass: string;
-  $: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' && (group ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600' : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'), outline && color === 'dark' && (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
-</script>
-
-<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} role={href ? 'link' : 'button'} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>
-  <slot />
-</svelte:element>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let pill: boolean = false;
-@prop export let outline: boolean = false;
-@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
-@prop export let href: string | undefined = undefined;
-@prop export let type: ButtonType = 'button';
-@prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
-@prop export let shadow: boolean = false;
--->

package/src/lib/buttons/GradientButton.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import Button from './Button.svelte';
-  import { getContext } from 'svelte';
-
-  const group = getContext('group');
-
-  export let color: keyof typeof gradientClasses = 'blue';
-  export let shadow: boolean = false;
-
-  const gradientClasses = {
-    blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ',
-    green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800',
-    cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800',
-    teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800',
-    lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800',
-    red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800',
-    pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800',
-    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800',
-    purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800',
-    cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800',
-    greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800',
-    purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800',
-    pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800',
-    tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700',
-    redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400'
-  };
-
-  const coloredShadowClasses = {
-    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
-    green: 'shadow-green-500/50 dark:shadow-green-800/80',
-    cyan: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
-    teal: 'shadow-teal-500/50 dark:shadow-teal-800/80 ',
-    lime: 'shadow-lime-500/50 dark:shadow-lime-800/80',
-    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
-    pink: 'shadow-pink-500/50 dark:shadow-pink-800/80',
-    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
-    purpleToBlue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
-    cyanToBlue: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
-    greenToBlue: 'shadow-green-500/50 dark:shadow-green-800/80',
-    purpleToPink: 'shadow-purple-500/50 dark:shadow-purple-800/80',
-    pinkToOrange: 'shadow-pink-500/50 dark:shadow-pink-800/80',
-    tealToLime: 'shadow-lime-500/50 dark:shadow-teal-800/80',
-    redToYellow: 'shadow-red-500/50 dark:shadow-red-800/80'
-  };
-
-  let gradientOutlineClass: string;
-  $: gradientOutlineClass = twMerge(
-    'inline-flex items-center justify-center w-full  !border-0',
-    $$props.pill || '!rounded-md',
-    'bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white', // this is limitation - no transparency
-    'hover:bg-transparent hover:!text-inherit',
-    'transition-all duration-75 ease-in group-hover:!bg-opacity-0 group-hover:!text-inherit'
-  );
-
-  let divClass: string;
-  $: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group ? ($$props.pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
-</script>
-
-{#if $$props.outline}
-  <div class={divClass}>
-    <!-- Trick to prentend outline without using border
-	    This has a limitation of no supporting transparency as
-	    is set to bg-white dark:bg-gray-900 -->
-    <Button {...$$restProps} color="none" class={gradientOutlineClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave><slot /></Button>
-  </div>
-{:else}
-  <Button {...$$restProps} color="none" class={divClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>
-    <slot />
-  </Button>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: keyof typeof gradientClasses = 'blue';
-@prop export let shadow: boolean = false;
--->