flowbite-svelte 0.27.13 → 0.27.15

package/src/lib/tabs/Tabs.svelte

@@ -0,0 +1,68 @@
+<script context="module" lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+
+  export interface TabCtxType {
+    activeClasses: string;
+    inactiveClasses: string;
+    selected: Writable<HTMLElement>;
+  }
+  // styles
+  const styledActiveClasses = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:bg-gray-700 dark:text-white',
+    pill: 'py-3 px-4 text-white bg-blue-600 rounded-lg',
+    underline: 'p-4 text-blue-600 border-b-2 border-blue-600 dark:text-blue-500 dark:border-blue-500',
+    none: ''
+  };
+
+  const styledInactiveClasses = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
+    pill: 'py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
+    underline:
+      'p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400',
+    none: ''
+  };
+</script>
+
+<script lang="ts">
+  import classNames from 'classnames';
+  import { setContext } from 'svelte';
+
+  export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
+  export let defaultClass: string = 'flex flex-wrap space-x-2';
+  export let contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
+  export let divider: boolean = true;
+  export let activeClasses: string =
+    'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
+  export let inactiveClasses: string =
+    'p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300';
+
+  const ctx: TabCtxType = {
+    activeClasses: styledActiveClasses[style] || activeClasses,
+    inactiveClasses: styledInactiveClasses[style] || inactiveClasses,
+    selected: writable<HTMLElement>()
+  };
+
+  $: divider = ['full', 'pill'].includes(style) ? false : divider;
+
+  setContext('ctx', ctx);
+
+  function init(node: HTMLElement) {
+    const destroy = ctx.selected.subscribe((x: HTMLElement) => {
+      if (x) node.replaceChildren(x);
+    });
+
+    return { destroy };
+  }
+
+  $: ulClass = classNames(defaultClass, style === 'underline' && '-mb-px', $$props.class);
+</script>
+
+<ul class={ulClass}>
+  <slot {style} />
+</ul>
+{#if divider}
+  <slot name="divider">
+    <div class="h-px bg-gray-200 dark:bg-gray-700" />
+  </slot>
+{/if}
+<div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init />

package/src/lib/timelines/Activity.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let olClass: string = 'relative border-l border-gray-200 dark:border-gray-700';
+</script>
+
+<ol class={olClass}>
+	<slot />
+</ol>

package/src/lib/timelines/ActivityItem.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { ActivityType } from '../types';
+	export let activities: ActivityType[];
+</script>
+
+{#each activities as { title, date, src, alt, text }}
+	<li class="mb-10 ml-6">
+		<span
+			class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"
+		>
+			<img class="rounded-full shadow-lg" {src} {alt} />
+		</span>
+		<div
+			class="p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600"
+		>
+			<div class="justify-between items-center mb-3 sm:flex">
+				<time class="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">{date}</time>
+				<div class="text-sm font-normal text-gray-500 lex dark:text-gray-300">
+					{@html title}
+				</div>
+			</div>
+			{#if text}
+				<div
+					class="p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300"
+				>
+					{@html text}
+				</div>
+			{/if}
+		</div>
+	</li>
+{/each}

package/src/lib/timelines/Group.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let divClass: string = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
+	export let timeClass: string = 'text-lg font-semibold text-gray-900 dark:text-white';
+	export let date: Date | string;
+</script>
+
+<div class={divClass}>
+	<time class={timeClass}>{date}</time>
+	<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
+		<slot />
+	</ol>
+</div>

package/src/lib/timelines/GroupItem.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { GroupTimelineType } from '../types';
+	export let timelines: GroupTimelineType[];
+</script>
+
+{#each timelines as { title, src, alt, isPrivate, href, comment }}
+	<li>
+		<a {href} class="block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
+			<img class="mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0" {src} {alt} />
+			<div class="text-gray-600 dark:text-gray-400">
+				<div class="text-base font-normal">
+					{@html title}
+				</div>
+				{#if comment}
+					<div class="text-sm font-normal">{comment}</div>
+				{/if}
+				<span class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
+					{#if isPrivate}
+						<svg
+							class="mr-1 w-3 h-3"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+							xmlns="http://www.w3.org/2000/svg"
+							><path
+								fill-rule="evenodd"
+								d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
+								clip-rule="evenodd"
+							/><path
+								d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"
+							/></svg
+						>
+						Private
+					{:else}
+						<svg
+							class="mr-1 w-3 h-3"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+							xmlns="http://www.w3.org/2000/svg"
+							><path
+								fill-rule="evenodd"
+								d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
+								clip-rule="evenodd"
+							/></svg
+						>
+						Public
+					{/if}
+				</span>
+			</div>
+		</a>
+	</li>
+{/each}

package/src/lib/timelines/Timeline.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	export let customClass: string = '';
+	export let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' | 'custom' =
+		'default';
+
+	setContext('order', order);
+	let olClasses = {
+		group:
+			'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
+		horizontal: 'items-center sm:flex',
+		activity: 'relative border-l border-gray-200 dark:border-gray-700',
+		vertical: 'relative border-l border-gray-200 dark:border-gray-700',
+		default: 'relative border-l border-gray-200 dark:border-gray-700',
+		custom: customClass
+	};
+</script>
+
+<ol class={olClasses[order]}>
+	<slot />
+</ol>

package/src/lib/timelines/TimelineHorizontal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let olClass: string = 'items-center sm:flex';
+</script>
+
+<ol class={olClass}>
+	<slot />
+</ol>

package/src/lib/timelines/TimelineItem.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import { getContext } from 'svelte';
+	export let title: string = '';
+	export let date: string = '';
+	export let customDiv: string = '';
+	export let customTimeClass: string = '';
+	let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' | 'custom' = 'default';
+	order = getContext('order');
+	const liClasses = {
+		default: 'mb-10 ml-4',
+		vertical: 'mb-10 ml-6',
+		horizontal: 'relative mb-6 sm:mb-0',
+		activity: 'mb-10 ml-6',
+		group: ''
+	};
+
+	const divClasses = {
+		default:
+			'absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700',
+		vertical:
+			'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900',
+		horizontal: 'flex items-center',
+		activity:
+			'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900',
+		group:
+			'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
+		custom: customDiv
+	};
+
+	const timeClasses = {
+		default: 'mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
+		vertical: 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
+		horizontal: 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
+		activity: 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0',
+		group: 'text-lg font-semibold text-gray-900 dark:text-white',
+		custom: customTimeClass
+	};
+
+	const h3Class = classNames(
+		order === 'vertical'
+			? 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white'
+			: 'text-lg font-semibold text-gray-900 dark:text-white'
+	);
+</script>
+
+<li class={liClasses[order]}>
+	{#if order === 'default'}
+		<div class={divClasses[order]} />
+		{#if date}
+			<time class={timeClasses[order]}>{date}</time>
+		{/if}
+		{#if title}
+			<h3 class={h3Class}>
+				{title}
+			</h3>
+		{/if}
+		<slot />
+	{:else if order === 'vertical'}
+		<div class={divClasses[order]} />
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else}
+			<svg
+				aria-hidden="true"
+				class="w-3 h-3 text-blue-600 dark:text-blue-400"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+					clip-rule="evenodd" /></svg>
+		{/if}
+		{#if title}
+			<h3 class={h3Class}>
+				{title}
+			</h3>
+		{/if}
+		{#if date}
+			<time class={timeClasses[order]}>{date}</time>
+		{/if}
+		<slot />
+	{:else if order === 'horizontal'}
+		<div class={divClasses[order]} />
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else}
+			<svg
+				aria-hidden="true"
+				class="w-3 h-3 text-blue-600 dark:text-blue-400"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+					clip-rule="evenodd" /></svg>
+		{/if}
+		{#if title}
+			<h3 class={h3Class}>
+				{title}
+			</h3>
+		{/if}
+		{#if date}
+			<time class={timeClasses[order]}>{date}</time>
+		{/if}
+		<slot />
+	{:else}
+		<div class={divClasses[order]} />
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else}
+			<svg
+				aria-hidden="true"
+				class="w-3 h-3 text-blue-600 dark:text-blue-400"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+					clip-rule="evenodd" /></svg>
+		{/if}
+		{#if title}
+			<h3 class={h3Class}>
+				{title}
+			</h3>
+		{/if}
+		{#if date}
+			<time class={timeClasses[order]}>{date}</time>
+		{/if}
+		<slot />
+	{/if}
+</li>

package/src/lib/timelines/TimelineItemHorizontal.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	// import type { TimelineItemHorizontalType } from '../types';
+	// export let timelineItems: TimelineItemHorizontalType[];
+	export let title: string;
+	export let date: string;
+	export let href: string;
+	export let text: string;
+	export let linkname: string;
+	export let icon: string;
+</script>
+
+<li class="relative mb-6 sm:mb-0">
+	<div class="flex items-center">
+		<div
+			class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
+			{#if icon}
+				{@html icon}
+			{:else}
+				<svg
+					class="w-3 h-3 text-blue-600 dark:text-blue-300"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						fill-rule="evenodd"
+						d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+						clip-rule="evenodd" /></svg>
+			{/if}
+		</div>
+		<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+	</div>
+	<div class="mt-3 sm:pr-8">
+		<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
+		<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+			>{date}</time>
+		<p class="text-base font-normal text-gray-500 dark:text-gray-400">
+			{text}
+		</p>
+	</div>
+	{#if href}
+		<a
+			{href}
+			class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+			>{linkname}
+			<svg
+				class="ml-2 w-3 h-3"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+					clip-rule="evenodd" /></svg
+			></a>
+	{/if}
+</li>

package/src/lib/timelines/TimelineItemVertical.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	// import type { TimelineItemVerticalType } from '../types';
+	// export let timelineItems: TimelineItemVerticalType[];
+	export let title: string;
+	export let date: string;
+</script>
+
+<li class="mb-10 ml-6">
+	<span
+		class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else}
+			<svg
+				width="20"
+				height="20"
+				class="text-blue-600 dark:text-blue-300"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+					clip-rule="evenodd" /></svg>
+		{/if}
+	</span>
+
+	<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">
+		{title}
+	</h3>
+	<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+		>{date}</time>
+	<slot />
+</li>

package/src/lib/toasts/Toast.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import Frame from '../utils/Frame.svelte';
+  import classNames from 'classnames';
+  import type { Colors } from '../types';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import { fade } from 'svelte/transition';
+  export let color:
+    | 'gray'
+    | 'red'
+    | 'yellow'
+    | 'green'
+    | 'indigo'
+    | 'default'
+    | 'purple'
+    | 'pink'
+    | 'blue'
+    | 'light'
+    | 'dark'
+    | 'dropdown'
+    | 'navbar'
+    | 'navbarUl'
+    | 'form'
+    | 'none' = 'blue';
+  export let simple: boolean = false;
+  export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
+  export let open: boolean = true;
+  export let divClass: string = 'w-full max-w-xs p-4';
+
+  const positions = {
+    'top-left': 'absolute top-5 left-5',
+    'top-right': 'absolute top-5 right-5',
+    'bottom-left': 'absolute bottom-5 left-5',
+    'bottom-right': 'absolute bottom-5 right-5',
+    none: ''
+  };
+
+  let classDiv: string;
+  $: classDiv = classNames(divClass, positions[position], $$props.class);
+
+  let iconClass: string;
+  $: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3');
+</script>
+
+{#if open}
+  <Frame rounded border transition={fade} {...$$restProps} class={classDiv} role="alert">
+    <div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
+      {#if $$slots.icon}
+        <Frame {color} rounded class={iconClass}><slot name="icon" /></Frame>
+      {/if}
+
+      <div class="text-sm font-normal w-full">
+        <slot />
+        <slot name="extra" />
+      </div>
+      {#if !simple}
+        <CloseButton on:click={() => (open = false)} />
+      {/if}
+    </div>
+  </Frame>
+{/if}

package/src/lib/toolbar/Toolbar.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+	import classNames from 'classnames';
+
+	const separators = writable(false);
+	setContext('toolbar', separators);
+
+	export let color: string = 'dark';
+	export let embedded: boolean = false;
+
+	const bgColors = {
+		gray: 'bg-gray-100 dark:bg-gray-200 ',
+		red: 'bg-red-100 dark:bg-red-200',
+		yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
+		green: 'bg-green-100 dark:bg-green-200 ',
+		indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
+		purple: 'bg-purple-100 dark:bg-purple-200 ',
+		pink: 'bg-pink-100 dark:bg-pink-200 ',
+		blue: 'bg-blue-100 dark:bg-blue-200 ',
+		dark: 'bg-gray-50 dark:bg-gray-700'
+		// custom: customBgClass
+	};
+
+	const textColors = {
+		gray: 'text-gray-500 dark:text-gray-700',
+		red: 'text-red-500 dark:text-red-700',
+		yellow: 'text-yellow-500 dark:text-yellow-700',
+		green: 'text-green-500 dark:text-green-700',
+		indigo: 'text-indigo-500 dark:text-indigo-700',
+		purple: 'text-purple-500 dark:text-purple-700',
+		pink: 'text-pink-500 dark:text-pink-700',
+		blue: 'text-blue-500 dark:text-blue-700',
+		dark: 'text-gray-500 dark:text-gray-400'
+		// custom: customTextColor
+	};
+
+	let divClass;
+	$: divClass = classNames(
+		'flex justify-between items-center',
+		embedded || 'rounded-lg border border-gray-200 dark:border-gray-600 py-2 px-3',
+		embedded || textColors[color],
+		embedded || bgColors[color],
+		$$props.class
+	);
+
+	const divideColors = {
+		gray: 'divide-gray-200 dark:divide-gray-700',
+		red: 'divide-red-200 dark:divide-red-700',
+		yellow: 'divide-yellow-200 dark:divide-yellow-700',
+		green: 'divide-green-200 dark:divide-green-700',
+		indigo: 'divide-indigo-200 dark:divide-indigo-700',
+		purple: 'divide-purple-200 dark:divide-purple-700',
+		pink: 'divide-pink-200 dark:divide-pink-700',
+		blue: 'divide-blue-200 dark:divide-blue-700',
+		dark: 'divide-gray-200 dark:divide-gray-600'
+		// custom: customTextColor
+	};
+
+	let separatorsClass;
+	$: separatorsClass = classNames(
+		$separators && 'divide-gray-200 sm:divide-x',
+		//  dark:divide-gray-600'
+		divideColors[color]
+	);
+</script>
+
+<div class={divClass}>
+	<div class="flex flex-wrap items-center {separatorsClass}">
+		<slot />
+	</div>
+	<slot name="end" />
+</div>

package/src/lib/toolbar/ToolbarButton.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import classNames from 'classnames';
+
+	const background = getContext('background');
+
+	export let color: string = 'default';
+	export let name: string = undefined;
+	export let ariaLabel: string = undefined;
+	export let size: 'xs' | 'sm' | 'md' = 'md';
+
+	const colors = {
+		default:
+			'hover:text-gray-900 hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
+		gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
+		red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
+		yellow: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300',
+		green: 'focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
+		indigo: 'focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-300',
+		purple: 'focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-300',
+		pink: 'focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-300',
+		blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300'
+	};
+
+	const sizing = {
+		xs: 'm-0.5 rounded focus:ring-1 p-0.5',
+		sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+		md: 'rounded-lg focus:ring-2 p-1.5'
+	};
+
+	let buttonClass: string;
+	$: buttonClass = classNames(
+		'focus:outline-none whitespace-normal',
+		sizing[size],
+		colors[color],
+		color === 'default' &&
+			(background ? 'hover:bg-gray-100 dark:hover:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'),
+		$$props.class
+	);
+
+	const svgSizes = {
+		xs: 'w-3 h-3',
+		sm: 'w-3.5 h-3.5',
+		md: 'w-5 h-5'
+	};
+</script>
+
+<button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+	{#if name}<span class="sr-only">{name}</span>{/if}
+	<slot>
+		<svg class={svgSizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+			<path
+				fill-rule="evenodd"
+				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+				clip-rule="evenodd" />
+		</svg>
+	</slot>
+</button>

package/src/lib/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Writable } from 'svelte/store';
+	import { getContext } from 'svelte';
+
+	const options: Writable<boolean> = getContext('toolbar');
+	if (options) $options = true;
+</script>
+
+<div class="flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0">
+	<slot />
+</div>

package/src/lib/tooltips/Tooltip.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Popper from '../utils/Popper.svelte';
+  import classNames from 'classnames';
+
+  export let style: 'dark' | 'light' | 'auto' | 'custom' = 'auto';
+  export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+
+  const styles = {
+    dark: 'border-gray-800 bg-gray-900 text-white dark:bg-gray-700 dark:border-gray-600',
+    light: 'border-gray-200 bg-white text-gray-900',
+    auto: 'border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600',
+    custom: ''
+  };
+
+  let toolTipClass: string;
+  $: {
+    if ($$restProps.color) style = 'custom';
+    else $$restProps.color = 'none';
+    toolTipClass = classNames('tooltip', defaultClass, styles[style], $$props.class);
+  }
+</script>
+
+<Popper data-tooltip rounded border shadow {...$$restProps} class={toolTipClass} on:show>
+  <slot />
+</Popper>