flowbite-svelte 0.44.7 → 0.44.9

package/src/lib/steps/StepIndicator.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { twMerge, twJoin } from 'tailwind-merge';
+
+  export let steps: string[] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+  export let currentStep = 1;
+  export let size: string = 'h-2.5';
+  export let color: 'primary' | 'secondary' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'custom' = 'primary';
+  export let glow: boolean = false;
+  export let hideLabel: boolean = false;
+  export let completedCustom: string = '';
+  export let currentCustom: string = '';
+
+  const completedStepColors = {
+    primary: 'bg-primary-500 dark:bg-primary-900',
+    secondary: 'bg-secondary-500 dark:bg-secondary-900',
+    gray: 'bg-gray-400 dark:bg-gray-500',
+    red: 'bg-red-600 dark:bg-red-900',
+    yellow: 'bg-yellow-400 dark:bg-yellow-600',
+    green: 'bg-green-500 dark:bg-green-900',
+    indigo: 'bg-indigo-500 dark:bg-indigo-900',
+    purple: 'bg-purple-500 dark:bg-purple-900',
+    pink: 'bg-pink-500 dark:bg-pink-900',
+    blue: 'bg-blue-500 dark:bg-blue-900',
+    custom: completedCustom
+  };
+  const currentStepColors = {
+    primary: 'bg-primary-800 dark:bg-primary-400',
+    secondary: 'bg-secondary-800 dark:bg-secondary-400',
+    gray: 'bg-gray-700 dark:bg-gray-200',
+    red: 'bg-red-900 dark:bg-red-500',
+    yellow: 'bg-yellow-600 dark:bg-yellow-400',
+    green: 'bg-green-800 dark:bg-green-400',
+    indigo: 'bg-indigo-800 dark:bg-indigo-400',
+    purple: 'bg-purple-800 dark:bg-purple-400',
+    pink: 'bg-pink-800 dark:bg-pink-400',
+    blue: 'bg-blue-800 dark:bg-blue-400',
+    custom: currentCustom
+  };
+</script>
+
+<div {...$$restProps} class={twMerge('space-y-2 dark:text-white', $$props.class)}>
+  {#if !hideLabel}
+    <h3 class="text-base font-semibold">{steps[currentStep - 1]}</h3>
+  {/if}
+  <div class={twJoin('flex justify-between gap-2 w-full', size)}>
+    {#each steps as step, i}
+      {#if i === currentStep - 1}
+        <div class="relative w-full h-full">
+          <div class={twJoin('relative w-full h-full rounded-sm', currentStepColors[color])} />
+          {#if glow}
+            <div class={twJoin('absolute -inset-1 rounded-sm blur opacity-30 dark:opacity-25', currentStepColors[color])} />
+          {/if}
+        </div>
+      {:else if i < currentStep - 1}
+        <div class={twJoin('w-full h-full rounded-sm', completedStepColors[color])} />
+      {:else}
+        <div class="w-full h-full rounded-sm bg-gray-200 dark:bg-gray-700" />
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let steps: string[] = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+@prop export let currentStep = 1;
+@prop export let size: string = 'h-2.5';
+@prop export let color: 'primary' | 'secondary' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'custom' = 'primary';
+@prop export let glow: boolean = false;
+@prop export let hideLabel: boolean = false;
+@prop export let completedCustom: string = '';
+@prop export let currentCustom: string = '';
+-->

package/src/lib/tables/Table.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { twMerge, twJoin } from 'tailwind-merge';
+  import { setContext } from 'svelte';
+  import type { TableColorType } from '../types';
+
+  export let divClass: string = 'relative overflow-x-auto';
+  export let striped: boolean = false;
+  export let hoverable: boolean = false;
+  export let noborder: boolean = false;
+  export let shadow: boolean = false;
+  export let color: TableColorType = 'default';
+  export let customeColor: string = '';
+
+  const colors = {
+    default: 'text-gray-500 dark:text-gray-400',
+    blue: 'text-blue-100 dark:text-blue-100',
+    green: 'text-green-100 dark:text-green-100',
+    red: 'text-red-100 dark:text-red-100',
+    yellow: 'text-yellow-100 dark:text-yellow-100',
+    purple: 'text-purple-100 dark:text-purple-100',
+    indigo: 'text-indigo-100 dark:text-indigo-100',
+    pink: 'text-pink-100 dark:text-pink-100',
+    custom: customeColor
+  };
+
+  $: setContext('striped', striped);
+  $: setContext('hoverable', hoverable);
+  $: setContext('noborder', noborder);
+  $: setContext('color', color);
+</script>
+
+<div class={twJoin(divClass, shadow && 'shadow-md sm:rounded-lg')}>
+  <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
+    <slot />
+  </table>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'relative overflow-x-auto';
+@prop export let striped: boolean = false;
+@prop export let hoverable: boolean = false;
+@prop export let noborder: boolean = false;
+@prop export let shadow: boolean = false;
+@prop export let color: TableColorType = 'default';
+@prop export let customeColor: string = '';
+-->

package/src/lib/tables/TableBody.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let tableBodyClass: string | undefined = undefined;
+</script>
+
+<tbody class={tableBodyClass}>
+  <slot />
+</tbody>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let tableBodyClass: string | undefined = undefined;
+-->

package/src/lib/tables/TableBodyCell.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+
+  export let tdClass: string = 'px-6 py-4 whitespace-nowrap font-medium ';
+
+  let color = 'default';
+  color = getContext('color');
+  let tdClassfinal: string;
+  $: tdClassfinal = twMerge(tdClass, color === 'default' ? 'text-gray-900 dark:text-white' : 'text-blue-50 whitespace-nowrap dark:text-blue-100', $$props.class);
+</script>
+
+<svelte:element this={$$props.onclick ? 'button' : 'td'} {...$$restProps} class={tdClassfinal} on:click role={$$props.onclick ? 'button' : undefined}>
+  <slot />
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let tdClass: string = 'px-6 py-4 whitespace-nowrap font-medium ';
+-->

package/src/lib/tables/TableBodyRow.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+
+  export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = getContext('color');
+
+  const colors = {
+    default: 'bg-white dark:bg-gray-800 dark:border-gray-700',
+    blue: 'bg-blue-500 border-blue-400',
+    green: 'bg-green-500 border-green-400',
+    red: 'bg-red-500 border-red-400',
+    yellow: 'bg-yellow-500 border-yellow-400',
+    purple: 'bg-purple-500 border-purple-400',
+    custom: ''
+  };
+
+  const hoverColors = {
+    default: 'hover:bg-gray-50 dark:hover:bg-gray-600',
+    blue: 'hover:bg-blue-400',
+    green: 'hover:bg-green-400',
+    red: 'hover:bg-red-400',
+    yellow: 'hover:bg-yellow-400',
+    purple: 'hover:bg-purple-400',
+    custom: ''
+  };
+
+  const stripColors = {
+    default: 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700',
+    blue: 'odd:bg-blue-800 even:bg-blue-700 odd:dark:bg-blue-800 even:dark:bg-blue-700',
+    green: 'odd:bg-green-800 even:bg-green-700 odd:dark:bg-green-800 even:dark:bg-green-700',
+    red: 'odd:bg-red-800 even:bg-red-700 odd:dark:bg-red-800 even:dark:bg-red-700',
+    yellow: 'odd:bg-yellow-800 even:bg-yellow-700 odd:dark:bg-yellow-800 even:dark:bg-yellow-700',
+    purple: 'odd:bg-purple-800 even:bg-purple-700 odd:dark:bg-purple-800 even:dark:bg-purple-700',
+    custom: ''
+  };
+
+  let trClass: string;
+  $: trClass = twMerge([!getContext('noborder') && 'border-b last:border-b-0', colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class]);
+</script>
+
+<tr {...$$restProps} class={trClass} on:click on:contextmenu>
+  <slot />
+</tr>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = getContext('color');
+-->

package/src/lib/tables/TableHead.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+
+  export let theadClass: string = 'text-xs uppercase';
+  export let defaultRow: boolean = true;
+
+  let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom';
+  color = getContext('color');
+  let noborder: boolean = getContext('noborder');
+  let striped: boolean = getContext('striped');
+  let defaultBgColor = noborder || striped ? '' : 'bg-gray-50 dark:bg-gray-700';
+  const bgColors = {
+    default: defaultBgColor,
+    blue: 'bg-blue-600',
+    green: 'bg-green-600',
+    red: 'bg-red-600',
+    yellow: 'bg-yellow-600',
+    purple: 'bg-purple-600',
+    custom: ''
+  };
+
+  let textColor = color === 'default' ? 'text-gray-700 dark:text-gray-400' : color === 'custom' ? '' : 'text-white  dark:text-white';
+  let borderColors = striped ? '' : color === 'default' ? 'border-gray-700' : color === 'custom' ? '' : `border-${color}-400`;
+
+  $: theadClassfinal = twMerge(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
+</script>
+
+<thead {...$$restProps} class={theadClassfinal}>
+  {#if defaultRow}
+    <tr>
+      <slot />
+    </tr>
+  {:else}
+    <slot />
+  {/if}
+</thead>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let theadClass: string = 'text-xs uppercase';
+@prop export let defaultRow: boolean = true;
+-->

package/src/lib/tables/TableHeadCell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let padding: string = 'px-6 py-3';
+</script>
+
+<th {...$$restProps} class={twMerge(padding, $$props.class)} on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+  <slot />
+</th>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let padding: string = 'px-6 py-3';
+-->

package/src/lib/tables/TableSearch.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { setContext } from 'svelte';
+
+  export let divClass: string = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+  export let inputValue: string = '';
+  export let striped: boolean = false;
+  export let hoverable: boolean = false;
+  export let placeholder: string = 'Search';
+  export let customColor: string = '';
+  export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
+  export let innerDivClass: string = 'p-4';
+  export let searchClass: string = 'relative mt-1';
+  export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
+  export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+  export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 pl-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+
+  let inputCls = twMerge(inputClass, $$props.classInput);
+  let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
+
+  const colors = {
+    default: 'text-gray-500 dark:text-gray-400',
+    blue: 'text-blue-100 dark:text-blue-100',
+    green: 'text-green-100 dark:text-green-100',
+    red: 'text-red-100 dark:text-red-100',
+    yellow: 'text-yellow-100 dark:text-yellow-100',
+    purple: 'text-purple-100 dark:text-purple-100',
+    custom: customColor
+  };
+
+  $: setContext('striped', striped);
+  $: setContext('hoverable', hoverable);
+  $: setContext('color', color);
+</script>
+
+<div class={divClass}>
+  <div class={innerDivClass}>
+    <label for="table-search" class="sr-only">Search</label>
+    <div class={searchClass}>
+      <div class={svgDivCls}>
+        <slot name="svgSearch">
+          <svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+          </svg>
+        </slot>
+      </div>
+      <input bind:value={inputValue} type="text" id="table-search" class={inputCls} {placeholder} />
+    </div>
+    <slot name="header" />
+  </div>
+  <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
+    <slot />
+  </table>
+  <slot name="footer" />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+@prop export let inputValue: string = '';
+@prop export let striped: boolean = false;
+@prop export let hoverable: boolean = false;
+@prop export let placeholder: string = 'Search';
+@prop export let customColor: string = '';
+@prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
+@prop export let innerDivClass: string = 'p-4';
+@prop export let searchClass: string = 'relative mt-1';
+@prop export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
+@prop export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 pl-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+-->

package/src/lib/tabs/TabItem.svelte

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

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

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

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

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

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