flowbite-svelte 0.11.1 → 0.12.0

package/README.md

@@ -10,6 +10,10 @@
 
 [Accordions](https://flowbite-svelte.vercel.app/accordions)
 
+## Avatar components
+
+[Avatar](https://flowbite-svelte.vercel.app/avatar)
+
 ## Alert components
 
 [Alerts](https://flowbite-svelte.vercel.app/alerts)
@@ -62,6 +66,10 @@
 
 [Navbars](https://flowbite-svelte.vercel.app/navbar)
 
+## Sidebar components
+
+[Sidebar](https://flowbite-svelte.vercel.app/sidebars)
+
 ## Spinner components
 
 [Spinners](https://flowbite-svelte.vercel.app/spinners)
@@ -70,6 +78,10 @@
 
 [Tabs](https://flowbite-svelte.vercel.app/tabs)
 
+## Toast components
+
+[Toast](https://flowbite-svelte.vercel.app/toasts)
+
 ## Tooltip components
 
 [Tooltips](https://flowbite-svelte.vercel.app/tooltips)

package/index.d.ts

@@ -52,16 +52,25 @@ export { default as SignInModal } from "./modals/SignInModal.svelte";
 export { default as SmallModal } from "./modals/SmallModal.svelte";
 export { default as Navbar } from "./navbar/Navbar.svelte";
 export { default as DropdownNavbar } from "./navbar/DropdownNavbar.svelte";
+export { default as Pagination } from "./paginations/Pagination.svelte";
+export { default as Previous } from "./paginations/Previous.svelte";
+export { default as Next } from "./paginations/Next.svelte";
+export { default as TableData } from "./paginations/TableData.svelte";
 export { default as Sidebar } from "./sidebars/Sidebar.svelte";
 export { default as Spinner } from "./spinners/Spinner.svelte";
 export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
 export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
 export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";
 export { default as PillTabs } from "./tabs/PillTabs.svelte";
+export { default as Group } from "./timelines/Group.svelte";
+export { default as GroupItem } from "./timelines/GroupItem.svelte";
+export { default as Activity } from "./timelines/Activity.svelte";
+export { default as ActivityItem } from "./timelines/ActivityItem.svelte";
 export { default as Timeline } from "./timelines/Timeline.svelte";
 export { default as TimelineItem } from "./timelines/TimelineItem.svelte";
-export { default as TimelineItemVertical } from "./timelines/TimelineItemVertical.svelte";
+export { default as TimelineHorizontal } from "./timelines/TimelineHorizontal.svelte";
 export { default as TimelineItemHorizontal } from "./timelines/TimelineItemHorizontal.svelte";
+export { default as TimelineItemVertical } from "./timelines/TimelineItemVertical.svelte";
 export { default as Toast } from "./toasts/Toast.svelte";
 export { default as Tooltip } from "./tooltips/Tooltip.svelte";
 export { default as LightTooltip } from "./tooltips/LightTooltip.svelte";

package/index.js

@@ -82,6 +82,12 @@ export { default as SmallModal } from'./modals/SmallModal.svelte'
 export { default as Navbar } from'./navbar/Navbar.svelte'
 export { default as DropdownNavbar } from'./navbar/DropdownNavbar.svelte'
 
+// Pagination
+export { default as Pagination } from './paginations/Pagination.svelte'
+export { default as Previous } from './paginations/Previous.svelte'
+export { default as Next } from './paginations/Next.svelte'
+export { default as TableData } from './paginations/TableData.svelte'
+
 // Sidebar
 export { default as Sidebar } from './sidebars/Sidebar.svelte'
 
@@ -95,10 +101,17 @@ export { default as DefaultTabs } from'./tabs/DefaultTabs.svelte'
 export { default as PillTabs } from './tabs/PillTabs.svelte'
 
 // Timeline
+export { default as Group } from './timelines/Group.svelte'
+export { default as GroupItem } from './timelines/GroupItem.svelte'
+export { default as Activity } from './timelines/Activity.svelte'
+export { default as ActivityItem } from './timelines/ActivityItem.svelte'
 export { default as Timeline } from './timelines/Timeline.svelte'
 export { default as TimelineItem } from './timelines/TimelineItem.svelte'
-export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte'
+export { default as TimelineHorizontal } from './timelines/TimelineHorizontal.svelte'
 export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte'
+export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte'
+
+
 
 // Toast
 export { default as Toast } from './toasts/Toast.svelte'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -126,6 +126,10 @@
     "./modals/modalStores": "./modals/modalStores.js",
     "./navbar/DropdownNavbar.svelte": "./navbar/DropdownNavbar.svelte",
     "./navbar/Navbar.svelte": "./navbar/Navbar.svelte",
+    "./paginations/Next.svelte": "./paginations/Next.svelte",
+    "./paginations/Pagination.svelte": "./paginations/Pagination.svelte",
+    "./paginations/Previous.svelte": "./paginations/Previous.svelte",
+    "./paginations/TableData.svelte": "./paginations/TableData.svelte",
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
     "./spinners/SpinnerButton.svelte": "./spinners/SpinnerButton.svelte",
@@ -133,6 +137,10 @@
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
+    "./timelines/Activity.svelte": "./timelines/Activity.svelte",
+    "./timelines/ActivityItem.svelte": "./timelines/ActivityItem.svelte",
+    "./timelines/Group.svelte": "./timelines/Group.svelte",
+    "./timelines/GroupItem.svelte": "./timelines/GroupItem.svelte",
     "./timelines/Timeline.svelte": "./timelines/Timeline.svelte",
     "./timelines/TimelineHorizontal.svelte": "./timelines/TimelineHorizontal.svelte",
     "./timelines/TimelineItem.svelte": "./timelines/TimelineItem.svelte",

package/paginations/Next.svelte

@@ -0,0 +1,28 @@
+<script >import { createEventDispatcher } from 'svelte';
+export let icon = false;
+const dispatch = createEventDispatcher();
+const next = () => {
+    dispatch('next');
+};
+export let nextClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+if (!icon) {
+    nextClass += ' ml-3';
+}
+</script>
+
+<a href="/" on:click|preventDefault={next} class={nextClass}>
+	Next
+	{#if icon}
+		<svg
+			class="ml-2 w-5 h-5"
+			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
+		>
+	{/if}
+</a>

package/paginations/Next.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        icon?: boolean;
+        nextClass?: string;
+    };
+    events: {
+        next: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NextProps = typeof __propDef.props;
+export declare type NextEvents = typeof __propDef.events;
+export declare type NextSlots = typeof __propDef.slots;
+export default class Next extends SvelteComponentTyped<NextProps, NextEvents, NextSlots> {
+}
+export {};

package/paginations/Pagination.svelte

@@ -0,0 +1,67 @@
+<script >import { createEventDispatcher } from 'svelte';
+export let icon = false;
+const dispatch = createEventDispatcher();
+const previous = () => {
+    dispatch('previous');
+};
+const next = () => {
+    dispatch('next');
+};
+export let pages;
+export let ulClass = 'inline-flex -space-x-px items-center';
+export let pageClass = 'py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let previousClass = 'py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let nextClass = 'py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let iconPreviousClass = 'block py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+</script>
+
+<nav aria-label="Page navigation">
+	<ul class={ulClass}>
+		<li>
+			{#if icon}
+				<a href="/" on:click|preventDefault={previous} class={iconPreviousClass}>
+					<span class="sr-only">Previous</span>
+					<svg
+						class="w-5 h-5"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+							clip-rule="evenodd"
+						/></svg
+					>
+				</a>
+			{:else}
+				<a href="/" on:click|preventDefault={previous} class={previousClass}>Previous</a>
+			{/if}
+		</li>
+		{#each pages as { pageNum, href }}
+			<li>
+				<a {href} class={pageClass}>{pageNum}</a>
+			</li>
+		{/each}
+		<li>
+			{#if icon}
+				<a href="/" on:click|preventDefault={next} class={iconNextClass}>
+					<span class="sr-only">Next</span>
+					<svg
+						class="w-5 h-5"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+							clip-rule="evenodd"
+						/></svg
+					>
+				</a>
+			{:else}
+				<a href="/" on:click|preventDefault={next} class={nextClass}>Next</a>
+			{/if}
+		</li>
+	</ul>
+</nav>

package/paginations/Pagination.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PageType } from '../types';
+declare const __propDef: {
+    props: {
+        icon?: boolean;
+        pages: PageType[];
+        ulClass?: string;
+        pageClass?: string;
+        previousClass?: string;
+        nextClass?: string;
+        iconPreviousClass?: string;
+        iconNextClass?: string;
+    };
+    events: {
+        previous: CustomEvent<any>;
+        next: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PaginationProps = typeof __propDef.props;
+export declare type PaginationEvents = typeof __propDef.events;
+export declare type PaginationSlots = typeof __propDef.slots;
+export default class Pagination extends SvelteComponentTyped<PaginationProps, PaginationEvents, PaginationSlots> {
+}
+export {};

package/paginations/Previous.svelte

@@ -0,0 +1,28 @@
+<script >import { createEventDispatcher } from 'svelte';
+export let icon = false;
+const dispatch = createEventDispatcher();
+const previous = () => {
+    dispatch('previous');
+};
+export let previousClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+if (icon) {
+    previousClass += ' mr-3';
+}
+</script>
+
+<a href="/" on:click|preventDefault={previous} class={previousClass}>
+	{#if icon}
+		<svg
+			class="mr-2 w-5 h-5"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
+				clip-rule="evenodd"
+			/></svg
+		>
+	{/if}
+	Previous
+</a>

package/paginations/Previous.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        icon?: boolean;
+        previousClass?: string;
+    };
+    events: {
+        previous: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PreviousProps = typeof __propDef.props;
+export declare type PreviousEvents = typeof __propDef.events;
+export declare type PreviousSlots = typeof __propDef.slots;
+export default class Previous extends SvelteComponentTyped<PreviousProps, PreviousEvents, PreviousSlots> {
+}
+export {};

package/paginations/TableData.svelte

@@ -0,0 +1,28 @@
+<script >import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+const previous = () => {
+    dispatch('previous');
+};
+const next = () => {
+    dispatch('next');
+};
+export let helper;
+export let btnPreClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+</script>
+
+<div class="flex flex-col items-center">
+	{#if helper}
+		<!-- Help text -->
+		<span class="text-sm text-gray-700 dark:text-gray-400">
+			Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span> to
+			<span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
+			of <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span> Entries
+		</span>
+	{/if}
+	<!-- Buttons -->
+	<div class="inline-flex mt-2 xs:mt-0">
+		<button on:click={previous} class={btnPreClass}> Prev </button>
+		<button on:click={next} class={btnNextClass}> Next </button>
+	</div>
+</div>

package/paginations/TableData.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        helper: {
+            start: number;
+            end: number;
+            total: number;
+        };
+        btnPreClass?: string;
+        btnNextClass?: string;
+    };
+    events: {
+        previous: CustomEvent<any>;
+        next: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TableDataProps = typeof __propDef.props;
+export declare type TableDataEvents = typeof __propDef.events;
+export declare type TableDataSlots = typeof __propDef.slots;
+export default class TableData extends SvelteComponentTyped<TableDataProps, TableDataEvents, TableDataSlots> {
+}
+export {};

package/timelines/Activity.svelte

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

package/timelines/Activity.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        olClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ActivityProps = typeof __propDef.props;
+export declare type ActivityEvents = typeof __propDef.events;
+export declare type ActivitySlots = typeof __propDef.slots;
+export default class Activity extends SvelteComponentTyped<ActivityProps, ActivityEvents, ActivitySlots> {
+}
+export {};

package/timelines/ActivityItem.svelte

@@ -0,0 +1,29 @@
+<script >export let activities;
+</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/timelines/ActivityItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ActivityType } from '../types';
+declare const __propDef: {
+    props: {
+        activities: ActivityType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ActivityItemProps = typeof __propDef.props;
+export declare type ActivityItemEvents = typeof __propDef.events;
+export declare type ActivityItemSlots = typeof __propDef.slots;
+export default class ActivityItem extends SvelteComponentTyped<ActivityItemProps, ActivityItemEvents, ActivityItemSlots> {
+}
+export {};

package/timelines/Group.svelte

@@ -0,0 +1,11 @@
+<script >export let divClass = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
+export let timeClass = 'text-lg font-semibold text-gray-900 dark:text-white';
+export let date;
+</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/timelines/Group.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        divClass?: string;
+        timeClass?: string;
+        date: Date | string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type GroupProps = typeof __propDef.props;
+export declare type GroupEvents = typeof __propDef.events;
+export declare type GroupSlots = typeof __propDef.slots;
+export default class Group extends SvelteComponentTyped<GroupProps, GroupEvents, GroupSlots> {
+}
+export {};

package/timelines/GroupItem.svelte

@@ -0,0 +1,49 @@
+<script >export let timelines;
+</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/timelines/GroupItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GroupTimelineType } from '../types';
+declare const __propDef: {
+    props: {
+        timelines: GroupTimelineType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type GroupItemProps = typeof __propDef.props;
+export declare type GroupItemEvents = typeof __propDef.events;
+export declare type GroupItemSlots = typeof __propDef.slots;
+export default class GroupItem extends SvelteComponentTyped<GroupItemProps, GroupItemEvents, GroupItemSlots> {
+}
+export {};

package/timelines/TimelineItemHorizontal.svelte

@@ -1,13 +1,27 @@
 <script >export let timelineItems;
 </script>
 
-{#each timelineItems as { date, title, text, href, linkname, icon }}
+{#each timelineItems as { date, title, text, icon }}
 	<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"
 			>
-				{icon}
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4" />
+				{: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>
@@ -19,24 +33,6 @@
 			<p class="text-base font-normal text-gray-500 dark:text-gray-400">
 				{text}
 			</p>
-			{#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}
 		</div>
 	</li>
 {/each}

package/timelines/TimelineItemHorizontal.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TimelineItemType } from '../types';
+import type { TimelineItemHorizontalType } from '../types';
 declare const __propDef: {
     props: {
-        timelineItems: TimelineItemType[];
+        timelineItems: TimelineItemHorizontalType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/timelines/TimelineItemVertical.svelte

@@ -6,7 +6,21 @@
 		<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"
 		>
-			<svelte:component this={icon} className="h-4 w-4" />
+			{#if icon}
+				<svelte:component this={icon} className="h-4 w-4" />
+			{: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}
 		</span>
 
 		<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">

package/types.d.ts

@@ -121,8 +121,33 @@ export interface TimelineItemType {
 export interface TimelineItemVerticalType {
     date: Date | string;
     title: string;
-    icon: typeof SvelteComponent;
+    icon?: typeof SvelteComponent;
     href?: string;
     linkname?: string;
     text?: HTMLElement | string;
 }
+export interface TimelineItemHorizontalType {
+    date: Date | string;
+    title: string;
+    icon?: typeof SvelteComponent;
+    text?: HTMLElement | string;
+}
+export interface ActivityType {
+    title: HTMLElement | string;
+    date: Date | string;
+    src: string;
+    alt: string;
+    text?: HTMLElement | string;
+}
+export interface GroupTimelineType {
+    title: string | HTMLElement;
+    src: string;
+    alt: string;
+    href?: string;
+    isPrivate?: boolean;
+    comment?: string | HTMLElement;
+}
+export interface PageType {
+    pageNum: number;
+    href: string;
+}