flowbite-svelte 0.44.11 → 0.44.13

package/src/lib/tabs/TabItem.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import type { TabCtxType } from './Tabs.svelte';
-  import { writable } from 'svelte/store';
-  import { twMerge } from 'tailwind-merge';
-
-  export let open: boolean = false;
-  export let title: string = 'Tab title';
-  export let activeClasses: string | undefined = undefined;
-  export let inactiveClasses: string | undefined = undefined;
-  export let defaultClass: string = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
-
-  const ctx = getContext<TabCtxType>('ctx') ?? {};
-  // single selection
-  const selected = ctx.selected ?? writable<HTMLElement>();
-
-  function init(node: HTMLElement) {
-    selected.set(node);
-
-    const destroy = selected.subscribe((x) => {
-      if (x !== node) {
-        open = false;
-      }
-    });
-
-    return { destroy };
-  }
-
-  let buttonClass: string;
-  $: buttonClass = twMerge(
-    defaultClass,
-    open ? activeClasses ?? ctx.activeClasses : inactiveClasses ?? ctx.inactiveClasses,
-    open && 'active'
-    // $$restProps.disabled && 'cursor-not-allowed pointer-events-none'
-  );
-</script>
-
-<li class={twMerge('group', $$props.class)} role="presentation">
-  <button type="button" on:click={() => (open = true)} on:blur on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover role="tab" {...$$restProps} class={buttonClass}>
-    <slot name="title">{title}</slot>
-  </button>
-
-  {#if open}
-    <div class="hidden tab_content_placeholder">
-      <div use:init>
-        <slot />
-      </div>
-    </div>
-  {/if}
-</li>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let open: boolean = false;
-@prop export let title: string = 'Tab title';
-@prop export let activeClasses: string | undefined = undefined;
-@prop export let inactiveClasses: string | undefined = undefined;
-@prop export let defaultClass: string = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
--->

package/src/lib/tabs/Tabs.svelte

@@ -1,78 +0,0 @@
-<script context="module" lang="ts">
-  import { writable, type Writable } from 'svelte/store';
-
-  export interface TabCtxType {
-    activeClasses: string;
-    inactiveClasses: string;
-    selected: Writable<HTMLElement>;
-  }
-</script>
-
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  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-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-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';
-
-  // 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-primary-300 focus:outline-none dark:bg-gray-700 dark:text-white',
-    pill: 'py-3 px-4 text-white bg-primary-600 rounded-lg',
-    underline: 'p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-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-primary-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: ''
-  };
-
-  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 = twMerge(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 />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
-@prop export let defaultClass: string = 'flex flex-wrap space-x-2';
-@prop export let contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
-@prop export let divider: boolean = true;
-@prop export let activeClasses: string = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
-@prop 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';
--->

package/src/lib/timeline/Activity.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let olClass: string = 'relative border-l border-gray-200 dark:border-gray-700';
-  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 = 'relative border-l border-gray-200 dark:border-gray-700';
--->

package/src/lib/timeline/ActivityItem.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { ActivityType } from '../types';
-
-  export let activities: ActivityType[];
-  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 imgClass: string = 'rounded-full shadow-lg';
-  export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
-  export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';
-  export let timeClass: string = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
-  export let titleClass: string = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';
-  export let textClass: string = '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';
-
-  let liCls: string = twMerge(liClass, $$props.classLi);
-  let spanCls: string = twMerge(spanClass, $$props.classSpan);
-  let imgCls: string = twMerge(imgClass, $$props.classImg);
-  let outerDivCls: string = twMerge(outerDivClass, $$props.classOuterDiv);
-  let innerDivCls: string = twMerge(innerDivClass, $$props.classInnerDiv);
-  let timeCls: string = twMerge(timeClass, $$props.classTime);
-  let titleCls: string = twMerge(titleClass, $$props.classTitle);
-  let textCls: string = twMerge(textClass, $$props.classText);
-</script>
-
-{#each activities as { title, date, src, alt, text }}
-  <li class={liCls}>
-    <span class={spanCls}>
-      <img class={imgCls} {src} {alt} />
-    </span>
-    <div class={outerDivCls}>
-      <div class={innerDivCls}>
-        <time class={timeCls}>{date}</time>
-        <div class={titleCls}>
-          {@html title}
-        </div>
-      </div>
-      {#if text}
-        <div class={textCls}>
-          {@html text}
-        </div>
-      {/if}
-    </div>
-  </li>
-{/each}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let activities: ActivityType[];
-@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 imgClass: string = 'rounded-full shadow-lg';
-@prop export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
-@prop export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';
-@prop export let timeClass: string = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
-@prop export let titleClass: string = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';
-@prop export let textClass: string = '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';
--->

package/src/lib/timeline/Group.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  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;
-  export let olClass: string = 'mt-3 divide-y divider-gray-200 dark:divide-gray-700';
-  let divCls: string = twMerge(divClass, $$props.classDiv);
-  let timeCls: string = twMerge(timeClass, $$props.classTime);
-  let olCls: string = twMerge(olClass, $$props.classOl);
-</script>
-
-<div class={divCls}>
-  <time class={timeCls}>{date}</time>
-  <ol class={olCls}>
-    <slot />
-  </ol>
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop 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';
-@prop export let timeClass: string = 'text-lg font-semibold text-gray-900 dark:text-white';
-@prop export let date: Date | string;
-@prop export let olClass: string = 'mt-3 divide-y divider-gray-200 dark:divide-gray-700';
--->

package/src/lib/timeline/GroupItem.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { GroupTimelineType } from '../types';
-
-  export let timelines: GroupTimelineType[];
-  export let aClass: string = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
-  export let imgClass: string = 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
-  export let divClass: string = 'text-gray-600 dark:text-gray-400';
-  export let titleClass: string = 'text-base font-normal';
-  export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
-
-  let aCls: string = twMerge(aClass, $$props.classA);
-  let imgCls: string = twMerge(imgClass, $$props.classImg);
-  let divCls: string = twMerge(divClass, $$props.classDiv);
-  let titleCls: string = twMerge(titleClass, $$props.classTitle);
-  let spanCls: string = twMerge(spanClass, $$props.classSpan);
-</script>
-
-{#each timelines as { title, src, alt, isPrivate, href, comment }}
-  <li>
-    <a {href} class={aCls}>
-      <img class={imgCls} {src} {alt} />
-      <div class={divCls}>
-        <div class={titleCls}>
-          {@html title}
-        </div>
-        {#if comment}
-          <div class="text-sm font-normal">{comment}</div>
-        {/if}
-        <span class={spanCls}>
-          {#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}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let timelines: GroupTimelineType[];
-@prop export let aClass: string = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
-@prop export let imgClass: string = 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
-@prop export let divClass: string = 'text-gray-600 dark:text-gray-400';
-@prop export let titleClass: string = 'text-base font-normal';
-@prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
--->

package/src/lib/timeline/Timeline.svelte

@@ -1,25 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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

@@ -1,116 +0,0 @@
-<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

@@ -1,72 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-<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';
--->