flowbite-svelte 0.44.8 → 0.44.10

package/src/lib/timeline/Timeline.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { setContext } from 'svelte';
+  export let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' = '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: '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'
+  };
+</script>
+
+<ol class={twMerge(olClasses[order], $$props.class)}>
+  <slot />
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' = 'default';
+-->

package/src/lib/timeline/TimelineHorizontal.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let olClass: string = 'sm:flex';
+
+  let olCls: string = twMerge(olClass, $$props.class);
+</script>
+
+<ol class={olCls}>
+  <slot />
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let olClass: string = 'sm:flex';
+-->

package/src/lib/timeline/TimelineItem.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  export let title: string = '';
+  export let date: string = '';
+  export let svgClass: string = 'w-3 h-3 text-primary-600 dark:text-primary-400';
+
+  let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' = '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-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900',
+    horizontal: 'flex items-center',
+    activity: 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900',
+    group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700'
+  };
+
+  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'
+  };
+
+  let liCls: string = twMerge(liClasses[order], $$props.classLi);
+  let divCls: string = twMerge(divClasses[order], $$props.classDiv);
+  let timeCls: string = twMerge(timeClasses[order], $$props.classTime);
+  const h3Cls = twMerge(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', $$props.classH3);
+</script>
+
+<li class={liCls}>
+  {#if order === 'default'}
+    <div class={divCls} />
+    {#if date}
+      <time class={timeCls}>{date}</time>
+    {/if}
+    {#if title}
+      <h3 class={h3Cls}>
+        {title}
+      </h3>
+    {/if}
+    <slot />
+  {:else if order === 'vertical'}
+    <div class={divCls} />
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {:else}
+      <svg aria-hidden="true" class={svgClass} 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={h3Cls}>
+        {title}
+      </h3>
+    {/if}
+    {#if date}
+      <time class={timeCls}>{date}</time>
+    {/if}
+    <slot />
+  {:else if order === 'horizontal'}
+    <div class={divCls} />
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {:else}
+      <svg aria-hidden="true" class={svgClass} 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={h3Cls}>
+        {title}
+      </h3>
+    {/if}
+    {#if date}
+      <time class={timeCls}>{date}</time>
+    {/if}
+    <slot />
+  {:else}
+    <div class={divCls} />
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {:else}
+      <svg aria-hidden="true" class={svgClass} 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={h3Cls}>
+        {title}
+      </h3>
+    {/if}
+    {#if date}
+      <time class={timeCls}>{date}</time>
+    {/if}
+    <slot />
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let title: string = '';
+@prop export let date: string = '';
+@prop export let svgClass: string = 'w-3 h-3 text-primary-600 dark:text-primary-400';
+-->

package/src/lib/timeline/TimelineItemHorizontal.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  // import type { TimelineItemHorizontalType } from '../types';
+  // export let timelineItems: TimelineItemHorizontalType[];
+  import { twMerge } from 'tailwind-merge';
+  export let title: string;
+  export let date: string;
+  export let href: string;
+  export let text: string;
+  export let liClass: string = 'relative mb-6 sm:mb-0';
+  export let divClass: string = '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';
+  export let h3Class: string = 'text-lg font-semibold text-gray-900 dark:text-white';
+  export let timeClass: string = 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500';
+  export let pClass: string = 'text-base font-normal text-gray-500 dark:text-gray-400';
+  export let aClass: string = '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';
+  export let linkname: string;
+  export let icon: string;
+  let liCls: string = twMerge(liClass, $$props.classLi);
+  let divCls: string = twMerge(divClass, $$props.classDiv);
+  let h3Cls: string = twMerge(h3Class, $$props.classH3);
+  let timeCls: string = twMerge(timeClass, $$props.classTime);
+  let pCls: string = twMerge(pClass, $$props.classP);
+  let aCls: string = twMerge(aClass, $$props.classA);
+</script>
+
+<li class={liCls}>
+  <div class="flex items-center">
+    <div class={divCls}>
+      {#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={h3Cls}>{title}</h3>
+    <time class={timeCls}>{date}</time>
+    <p class={pCls}>
+      {text}
+    </p>
+  </div>
+  {#if href}
+    <a {href} class={aCls}>
+      {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>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let timelineItems: TimelineItemHorizontalType[];
+@prop export let title: string;
+@prop export let date: string;
+@prop export let href: string;
+@prop export let text: string;
+@prop export let liClass: string = 'relative mb-6 sm:mb-0';
+@prop export let divClass: string = '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';
+@prop export let h3Class: string = 'text-lg font-semibold text-gray-900 dark:text-white';
+@prop export let timeClass: string = 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500';
+@prop export let pClass: string = 'text-base font-normal text-gray-500 dark:text-gray-400';
+@prop export let aClass: string = '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';
+@prop export let linkname: string;
+@prop export let icon: string;
+-->

package/src/lib/timeline/TimelineItemVertical.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let title: string;
+  export let date: string;
+  export let liClass: string = 'mb-10 ml-6';
+  export let spanClass: string = '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';
+  export let h3Class: string = 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white';
+  export let timeClass: string = 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500';
+
+  let liCls: string = twMerge(liClass, $$props.classLi);
+  let spanCls: string = twMerge(spanClass, $$props.classSpan);
+  let h3Cls: string = twMerge(h3Class, $$props.classH3);
+  let timeCls: string = twMerge(timeClass, $$props.classTime);
+</script>
+
+<li class={liCls}>
+  <span class={spanCls}>
+    {#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={h3Cls}>
+    {title}
+  </h3>
+  <time class={timeCls}>{date}</time>
+  <slot />
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let title: string;
+@prop export let date: string;
+@prop export let liClass: string = 'mb-10 ml-6';
+@prop export let spanClass: string = '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';
+@prop export let h3Class: string = 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white';
+@prop export let timeClass: string = 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500';
+-->

package/src/lib/toasts/Toast.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import Frame from '../utils/Frame.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import { fade } from 'svelte/transition';
+  import type { Dismissable } from '$lib/types';
+
+  // propagate props type from underying Frame
+  interface $$Props extends ComponentProps<Frame>, Dismissable {
+    color?: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none';
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
+    open?: boolean;
+    divClass?: string;
+    defaultIconClass?: string;
+    extraIconClass?: string;
+    contentClass?: string;
+  }
+
+  export let dismissable: boolean = true;
+  export let color: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
+  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 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
+  export let defaultIconClass: string = 'w-8 h-8';
+  export let contentClass: string = 'w-full text-sm font-normal';
+  export let align: boolean = true;
+
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+
+  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: ''
+  };
+
+  function close(e: MouseEvent) {
+    e.stopPropagation();
+    open = false;
+  }
+
+  let finalDivClass: string;
+  $: finalDivClass = twMerge('flex', align ? 'items-center' : 'items-start', divClass, positions[position], $$props.class);
+
+  const colors = {
+    primary: 'text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200',
+    gray: 'text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200',
+    red: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200',
+    green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+    blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
+    indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
+    purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
+    orange: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
+    none: ''
+  };
+
+  let iconClass: string;
+  $: iconClass = twMerge('inline-flex items-center justify-center shrink-0', colors[color], defaultIconClass);
+
+  const clsBtnExtraClass = '-mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 focus:!ring-gray-300 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-white dark:hover:bg-gray-700';
+</script>
+
+{#if open}
+  <Frame rounded transition={fade} color="none" {...$$restProps} class={finalDivClass} role="alert">
+    {#if $$slots.icon}
+      <Frame rounded color="none" class={iconClass}>
+        <slot name="icon" />
+      </Frame>
+    {/if}
+
+    <div class={contentClass}>
+      <slot />
+    </div>
+
+    {#if dismissable}
+      <slot name="close-button" {close}>
+        <CloseButton class={clsBtnExtraClass} on:click={close} />
+      </slot>
+    {/if}
+  </Frame>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let dismissable: boolean = true;
+@prop export let color: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
+@prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
+@prop export let open: boolean = true;
+@prop export let divClass: string = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
+@prop export let defaultIconClass: string = 'w-8 h-8';
+@prop export let contentClass: string = 'w-full text-sm font-normal';
+@prop export let align: boolean = true;
+-->

package/src/lib/toolbar/Toolbar.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { ToolbarColorType } from '../types';
+  import { setContext, type ComponentProps } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { twMerge, twJoin } from 'tailwind-merge';
+  import Frame from '$lib/utils/Frame.svelte';
+
+  interface $$Props extends ComponentProps<Frame> {
+    color: 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'dark' | 'none';
+    embedded: boolean;
+  }
+
+  const separators = writable(false);
+  setContext('toolbar', separators);
+
+  export let color: ToolbarColorType = 'dark';
+  export let embedded: boolean = false;
+
+  let divClass: string;
+  $: divClass = twMerge('flex justify-between items-center', embedded || 'p-2', $$props.class);
+
+  const divideColors = {
+    gray: 'divide-gray-400 dark:divide-gray-700',
+    red: 'divide-red-400 dark:divide-red-700',
+    yellow: 'divide-yellow-400 dark:divide-yellow-700',
+    green: 'divide-green-400 dark:divide-green-700',
+    indigo: 'divide-indigo-400 dark:divide-indigo-700',
+    purple: 'divide-purple-400 dark:divide-purple-700',
+    pink: 'divide-pink-400 dark:divide-pink-700',
+    blue: 'divide-blue-400 dark:divide-blue-700',
+    dark: 'divide-gray-400 dark:divide-gray-600',
+    none: ''
+  };
+
+  let separatorsClass: string;
+  $: separatorsClass = twJoin($separators && 'sm:divide-x', divideColors[color]);
+</script>
+
+<Frame {...$$restProps} class={divClass} color={embedded ? 'none' : color} rounded={!embedded}>
+  <div class="flex flex-wrap items-center {separatorsClass}">
+    <slot />
+  </div>
+  <slot name="end" />
+</Frame>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: ToolbarColorType = 'dark';
+@prop export let embedded: boolean = false;
+-->

package/src/lib/toolbar/ToolbarButton.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { ToolbarButtonType } from '../types';
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  const background = getContext('background');
+
+  export let color: ToolbarButtonType = 'default';
+  export let name: string | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
+  export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+  export let href: string | undefined = undefined;
+
+  const colors = {
+    dark: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
+    gray: 'text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300',
+    red: 'text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300',
+    yellow: 'text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300',
+    green: 'text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300',
+    indigo: 'text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300',
+    purple: 'text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300',
+    pink: 'text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300',
+    blue: 'text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300',
+    primary: 'text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300',
+    default: 'focus:ring-gray-400'
+  };
+
+  const sizing = {
+    xs: 'm-0.5 rounded-sm focus:ring-1 p-0.5',
+    sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+    md: 'm-0.5 rounded-lg focus:ring-2 p-1.5',
+    lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5'
+  };
+
+  let buttonClass: string;
+  $: buttonClass = twMerge('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',
+    lg: 'w-5 h-5'
+  };
+</script>
+
+{#if href}
+  <a {href} {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    <slot svgSize={svgSizes[size]} />
+  </a>
+{:else}
+  <button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    <slot svgSize={svgSizes[size]} />
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: ToolbarButtonType = 'default';
+@prop export let name: string | undefined = undefined;
+@prop export let ariaLabel: string | undefined = undefined;
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+@prop export let href: string | undefined = undefined;
+-->

package/src/lib/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { Writable } from 'svelte/store';
+  import { getContext } from 'svelte';
+  export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+
+  const options: Writable<boolean> = getContext('toolbar');
+  if (options) $options = true;
+</script>
+
+<div class={twMerge(divClass, $$props.class)}>
+  <slot />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+-->

package/src/lib/tooltips/Tooltip.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import Popper from '../utils/Popper.svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Popper> {
+    type?: 'dark' | 'light' | 'auto' | 'custom';
+    defaultClass?: string;
+  }
+
+  export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
+  export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+
+  const types = {
+    dark: 'bg-gray-900 text-white dark:bg-gray-700',
+    light: 'border-gray-200 bg-white text-gray-900',
+    auto: ' bg-white text-gray-900 dark:bg-gray-700 dark:text-white border-gray-200 dark:border-gray-700',
+    custom: ''
+  };
+
+  let toolTipClass: string;
+  $: {
+    if ($$restProps.color) type = 'custom';
+    else $$restProps.color = 'none';
+
+    if (['light', 'auto'].includes(type)) $$restProps.border = true;
+    toolTipClass = twMerge('tooltip', defaultClass, types[type], $$props.class);
+  }
+</script>
+
+<Popper rounded shadow {...$$restProps} class={toolTipClass} on:show>
+  <slot />
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
+@prop export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+-->