flowbite-svelte 0.27.13 → 0.27.15

package/src/lib/accordions/AccordionItem.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import ChevronDown from '$lib/utils/ChevronDown.svelte';
+  import ChevronUp from '$lib/utils/ChevronUp.svelte';
+  import classNames from 'classnames';
+  import { getContext, onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { fade, blur, fly, slide } from 'svelte/transition';
+  import type { TransitionTypes, TransitionParamTypes } from '../types';
+  import type { AccordionCtxType } from './Accordion.svelte';
+
+  export let open: boolean = false;
+  export let activeClasses: string | undefined = undefined;
+  export let inactiveClasses: string | undefined = undefined;
+
+  export let defaultClass: string =
+    'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl';
+
+  export let transitionType: TransitionTypes = 'slide';
+  export let transitionParams: TransitionParamTypes = {};
+
+  // make a custom transition function that returns the desired transition
+  const multiple = (node: HTMLElement, params: any) => {
+    switch (transitionType) {
+      case 'blur':
+        return blur(node, params);
+      case 'fly':
+        return fly(node, params);
+      case 'fade':
+        return fade(node, params);
+      default:
+        return slide(node, params);
+    }
+  };
+
+  const ctx = getContext<AccordionCtxType>('ctx') ?? {};
+
+  // single selection
+  const self = {};
+  const selected = ctx.selected ?? writable();
+
+  let _open: boolean = open;
+  open = false;
+
+  onMount(() => {
+    if (_open) $selected = self;
+
+    // this will trigger unsubscribe on destroy
+    return selected.subscribe((x) => (open = x === self));
+  });
+
+  const handleToggle = (e: Event) => selected.set(open ? {} : self);
+
+  let buttonClass: string;
+  $: buttonClass = classNames(
+    defaultClass,
+    ctx.flush ? 'py-5' : 'p-5',
+    open && (ctx.flush ? 'text-gray-900 dark:text-white' : activeClasses || ctx.activeClasses),
+    !open && (ctx.flush ? 'text-gray-500 dark:text-gray-400' : inactiveClasses || ctx.inactiveClasses),
+    $$props.class
+  );
+</script>
+
+<h2 aria-expanded={open} class="group">
+  <button on:click={handleToggle} type="button" class={buttonClass}>
+    <slot name="header" />
+    {#if open}
+      <slot name="arrowup"><ChevronUp /></slot>
+    {:else}
+      <slot name="arrowdown"><ChevronDown /></slot>
+    {/if}
+  </button>
+</h2>
+{#if open}
+  <div transition:multiple={transitionParams}>
+    <div class={ctx.flush ? 'py-5' : 'p-5'}>
+      <slot />
+    </div>
+  </div>
+{/if}

package/src/lib/alerts/Alert.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import { createEventDispatcher } from 'svelte';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import Frame from '../utils/Frame.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let dismissable: boolean = false;
+  export let accent: boolean = false;
+
+  let hidden = false;
+
+  const handleHide = () => {
+    hidden = !hidden;
+    dispatch('close'); // preffered name
+  };
+
+  let divClass: string;
+  $: divClass = classNames(
+    'p-4 text-sm',
+    accent && 'border-t-4 ',
+    hidden && 'hidden',
+    $$props.class
+  );
+
+  $: {
+    // set default values
+    $$restProps.color = $$restProps.color ?? 'blue';
+    $$restProps.rounded = $$restProps.rounded ?? !accent;
+  }
+</script>
+
+<Frame {...$$restProps} class={divClass} role="alert">
+  <div class="flex items-center">
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {/if}
+    <div class:ml-3={$$slots.icon}>
+      <slot />
+    </div>
+
+    {#if dismissable}
+      <CloseButton
+        class="-mx-1.5 -my-1.5"
+        color={$$restProps.color}
+        on:click={handleHide}
+        on:click
+        on:change
+        on:keydown
+        on:keyup
+        on:focus
+        on:blur
+        on:mouseenter
+        on:mouseleave />
+    {/if}
+  </div>
+  <slot name="extra" />
+</Frame>

package/src/lib/avatar/Avatar.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import classNames from 'classnames';
+
+  import AvatarPlaceholder from './Placeholder.svelte';
+  import Dot from './Dot.svelte';
+  import type { DotType } from '../types';
+
+  export let src: string = '';
+  export let href: string = '#';
+
+  export let rounded: boolean = false;
+  export let border: boolean = false;
+  export let stacked: boolean = false;
+
+  export let dot: DotType = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
+  export let alt: string = '';
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+
+  const sizes = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-20 h-20',
+    xl: 'w-36 h-36'
+  };
+
+  let avatarClass: string;
+  $: avatarClass = classNames(
+    rounded ? 'rounded' : 'rounded-full',
+    border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500',
+    sizes[size],
+    stacked && 'border-2 -ml-4 border-white dark:border-gray-800',
+    'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300',
+    $$props.class
+  );
+</script>
+
+<Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
+  {#if src}
+    <img {alt} {src} {...$$restProps} class={avatarClass} />
+  {:else if $$slots.default}
+    <svelte:element
+      this={href ? 'a' : 'div'}
+      {href}
+      {...$$restProps}
+      class="flex justify-center items-center text-xs font-medium {avatarClass}">
+      <slot />
+    </svelte:element>
+  {:else}
+    <svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
+      <AvatarPlaceholder {rounded} />
+    </svelte:element>
+  {/if}
+</Dot>

package/src/lib/avatar/Dot.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	export let show: boolean = false;
+	export let top: boolean = false;
+	export let color: string = 'bg-gray-300 dark:bg-gray-500';
+	export let rounded: boolean = false;
+	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+
+	const sizes = {
+		xs: 'w-2.5 h-2.5',
+		sm: 'w-3 h-3',
+		md: 'w-3.5 h-3.5',
+		lg: 'w-6 h-6',
+		xl: 'w-10 h-10'
+	};
+
+	const offsets = {
+		xs: ['left-4', 'left-5'],
+		sm: ['left-6', 'left-6'],
+		md: ['left-7', 'left-8'],
+		lg: ['left-14', 'left-16'],
+		xl: ['left-24', 'left-32']
+	};
+
+	let dotClass;
+	$: dotClass = classNames(
+		'absolute rounded-full border-white dark:border-gray-800 border-2',
+		sizes[size],
+		offsets[size][+rounded],
+		top ? 'top-0' : 'bottom-0',
+		rounded && top && 'transform -translate-y-1/2',
+		rounded && !top && 'transform translate-y-1/4',
+		color
+	);
+
+	let divClass;
+	$: divClass = classNames('relative flex-shrink-0', $$props.class);
+</script>
+
+{#if show}
+	<div class={divClass}>
+		<slot />
+		<span class={dotClass} />
+	</div>
+{:else}
+	<slot />
+{/if}

package/src/lib/avatar/Placeholder.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let rounded: boolean = false;
+</script>
+
+<svg
+	class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
+	fill="currentColor"
+	viewBox="0 0 16 16"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+		clip-rule="evenodd"
+	/>
+</svg>

package/src/lib/badges/Badge.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import type { Colors } from '../types';
+	import CloseButton from '../utils/CloseButton.svelte';
+
+	export let color: Colors = 'blue';
+	export let large: boolean = false;
+	export let href: string = undefined;
+	export let rounded: boolean = false;
+	export let index: boolean = false;
+	export let dismissable: boolean = false;
+	export let baseClass: string = 'inline-flex items-center justify-center -mb-0.5';
+
+	let hidden = false;
+
+	const colors = {
+		blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
+		dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+		red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
+		green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
+		yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
+		indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
+		purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900',
+		pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900',
+		['!blue']: 'bg-blue-500 text-blue-100',
+		['!dark']: 'bg-gray-500 text-gray-100',
+		['!red']: 'bg-red-500 text-white',
+		['!green']: 'bg-green-500 text-green-100',
+		['!yellow']: 'bg-yellow-300 text-yellow-800',
+		['!indigo']: 'bg-indigo-500 text-indigo-100',
+		['!purple']: 'bg-purple-500 text-purple-100',
+		['!pink']: 'bg-pink-500 text-pink-100'
+	};
+
+	const hovers = {
+		blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
+		dark: 'hover:bg-gray-200 dark:hover:bg-gray-300',
+		red: 'hover:bg-red-200 dark:hover:bg-red-300',
+		green: 'hover:bg-green-200 dark:hover:bg-green-300',
+		yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
+		indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
+		purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
+		pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
+	};
+
+	let badgeClass;
+	$: badgeClass = classNames(
+		baseClass,
+		large ? 'text-sm font-medium' : 'text-xs font-semibold',
+		colors[color],
+		href && (hovers[color] ?? hovers.blue),
+		rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5',
+		index && 'absolute font-bold border-2 border-white dark:border-gray-900',
+		index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'),
+		$$props.class
+	);
+	const handleHide = () => {
+		hidden = !hidden;
+	};
+</script>
+
+<svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass} class:hidden>
+	<slot />
+	{#if dismissable}
+		<CloseButton {color} on:click={handleHide} size={large ? 'sm' : 'xs'} class="ml-1.5 -mr-1.5" />
+	{/if}
+</svelte:element>

package/src/lib/breadcrumbs/Breadcrumb.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	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={classNames(classNav, $$props.class)}>
+	<ol class={classNames(olClass, $$props.classOl)}>
+		<slot />
+	</ol>
+</nav>

package/src/lib/breadcrumbs/BreadcrumbItem.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  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="inline-flex items-center" {...$$restProps}>
+  {#if home}
+    <a class={homeClass} {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={linkClass} {href}>
+        <slot />
+      </a>
+    {:else}
+      <span class={spanClass}>
+        <slot />
+      </span>
+    {/if}
+  {/if}
+</li>

package/src/lib/buttongroups/ButtonGroup.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import classNames from 'classnames';
+  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={classNames(divClass, $$props.class)} role="group">
+  <slot />
+</div>

package/src/lib/buttons/Button.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import { getContext } from 'svelte';
+  import type { ButtonType } from '../types';
+
+  const group = getContext('group');
+
+  export let pill: boolean = false;
+  export let outline: boolean = false;
+  export let gradient: boolean = false;
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
+  export let href: string | undefined = undefined;
+  export let btnClass: string | undefined = undefined;
+  export let type: ButtonType = 'button';
+
+  export let color:
+    | 'alternative'
+    | 'blue'
+    | 'cyan'
+    | 'dark'
+    | 'light'
+    | 'lime'
+    | 'green'
+    | 'pink'
+    | 'primary'
+    | 'red'
+    | 'teal'
+    | 'yellow'
+    | 'purple'
+    | 'purpleToBlue'
+    | 'cyanToBlue'
+    | 'greenToBlue'
+    | 'purpleToPink'
+    | 'pinkToOrange'
+    | 'tealToLime'
+    | 'redToYellow' = group ? (outline ? 'dark' : 'alternative') : 'blue';
+
+  export let shadow: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null = null;
+
+  const colorClasses = {
+    blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
+    dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+    alternative:
+      'text-gray-900 bg-white border border-gray-200 dark:border-gray-600 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 hover:text-blue-700 focus:text-blue-700 dark:focus:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+    light:
+      'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700',
+    green:
+      'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
+    red: 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
+    yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900',
+    primary:
+      'text-white bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800',
+    purple:
+      'text-white bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'
+  };
+
+  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-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80',
+    green: 'shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80',
+    cyan: 'shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80',
+    teal: 'shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 ',
+    lime: 'shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80',
+    red: 'shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 ',
+    pink: 'shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80',
+    purple: 'shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80'
+  };
+
+  const outlineClasses = {
+    blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
+    dark: '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',
+    green:
+      'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
+    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
+    yellow:
+      'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
+    purple:
+      'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900'
+  };
+
+  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'
+  };
+
+  function rounded(gradientOutline: boolean = false) {
+    if (group) {
+      return pill
+        ? 'first:rounded-l-full last:rounded-r-full'
+        : gradientOutline
+        ? 'first:rounded-l-md last:rounded-r-md'
+        : 'first:rounded-l-lg last:rounded-r-lg';
+    }
+    return pill ? 'rounded-full' : gradientOutline ? 'rounded-md' : 'rounded-lg';
+  }
+
+  const hasBorder = () => outline || color === 'alternative' || color === 'light';
+
+  let buttonClass;
+  $: buttonClass = btnClass
+    ? btnClass
+    : classNames(
+        'text-center font-medium',
+        group ? 'focus:ring-2' : 'focus:ring-4',
+        group && 'focus:z-10',
+        !group || color === 'alternative' || (outline && color === 'dark') || 'focus:outline-none',
+        outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size],
+        gradient ? gradientClasses[color] : 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-800 dark:hover:border-gray-700'),
+        outline &&
+          color === 'dark' &&
+          (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'),
+        hasBorder() && group && 'border-l-0 first:border-l',
+        rounded(false),
+        shadow && coloredShadowClasses[shadow],
+        $$props.disabled && 'cursor-not-allowed opacity-50',
+        $$props.class
+      );
+
+  let gradientOutlineClass;
+  $: gradientOutlineClass = classNames(
+    'inline-flex items-center justify-center',
+    sizeClasses[size],
+    rounded(true),
+    'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
+    'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit'
+  );
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'button'}
+  type={href ? undefined : type}
+  {href}
+  {...$$restProps}
+  class={buttonClass}
+  on:click
+  on:change
+  on:keydown
+  on:keyup
+  on:mouseenter
+  on:mouseleave>
+  {#if outline && gradient}
+    <!-- Trick to prentend outline without using border
+		This has a limitation of no supporting transparency as
+		background is set to bg-white dark:bg-gray-900 -->
+    <span class={gradientOutlineClass}><slot /></span>
+  {:else}
+    <slot />
+  {/if}
+</svelte:element>

package/src/lib/cards/Card.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { SizeType } from '$lib/types';
+  import classNames from 'classnames';
+  import Frame from '../utils/Frame.svelte';
+
+  export let href: string | undefined = undefined;
+  export let horizontal: boolean = false;
+  export let reverse: boolean = false;
+  export let img: string | undefined = undefined;
+  export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
+  export let size: SizeType = 'sm';
+
+  const paddings = {
+    none: 'p-0',
+    sm: 'p-4 sm:p-6 md:p-8',
+    md: 'p-4 sm:p-5',
+    lg: 'p-4 sm:p-6',
+    xl: 'p-4 sm:p-8'
+  };
+
+  const sizes = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-screen-xl'
+  };
+
+  let innerPdding: string;
+  $: innerPdding = paddings[padding];
+
+  let cardClass: string;
+  $: cardClass = classNames(
+    'flex',
+    sizes[size],
+    reverse ? 'flex-col-reverse' : 'flex-col',
+    horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'),
+    href && 'hover:bg-gray-100 dark:hover:bg-gray-700',
+    !img && innerPdding,
+    $$props.class
+  );
+
+  let imgClass: string;
+  $: imgClass = classNames(
+    reverse ? 'rounded-b-lg' : 'rounded-t-lg',
+    horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none',
+    horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg')
+  );
+</script>
+
+<Frame tag={href ? 'a' : 'div'} rounded shadow border {href} {...$$restProps} class={cardClass}>
+  {#if img}
+    <img class={imgClass} src={img} alt="" />
+    <div class={innerPdding}>
+      <slot />
+    </div>
+  {:else}
+    <slot />
+  {/if}
+</Frame>

package/src/lib/carousels/Caption.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let caption: string = '';
+  export let captionClass: string = '';
+</script>
+
+<div class={captionClass}>
+  <p id="caption" class="text-gray-900 dark:text-white">{caption}</p>
+</div>