flowbite-svelte 0.11.1 → 0.12.2

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/sidebars/Sidebar.svelte

@@ -1,13 +1,7 @@
-<script >import { slide } from 'svelte/transition';
+<script >import SidebarDropdown from './SidebarDropdown.svelte';
 export let site;
 export let links;
 export let cta;
-let isOpen = false;
-let activeDropdown = undefined;
-const handleDropdown = (id) => {
-    isOpen = !isOpen;
-    activeDropdown = id;
-};
 </script>
 
 <aside class="w-64" aria-label="Sidebar">
@@ -23,48 +17,7 @@ const handleDropdown = (id) => {
 		<ul class="space-y-2">
 			{#each links as link (link.id)}
 				{#if link.children}
-					<li>
-						<button
-							type="button"
-							on:click={() => handleDropdown(link.id)}
-							class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
-							aria-controls="dropdown"
-							data-collapse-toggle="dropdown"
-						>
-							{#if link.icon}
-								<svelte:component this={link.icon} className="h-4 w-4 mr-2" />
-							{/if}
-							<span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item=""
-								>{link.name}</span
-							>
-							<svg
-								sidebar-toggle-item=""
-								class="w-6 h-6"
-								fill="currentColor"
-								viewBox="0 0 20 20"
-								xmlns="http://www.w3.org/2000/svg"
-								><path
-									fill-rule="evenodd"
-									d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-									clip-rule="evenodd"
-								/></svg
-							>
-						</button>
-						{#if isOpen && link.id == activeDropdown}
-							<ul id="dropdown" class="py-2 space-y-2" transition:slide={{ duration: 500 }}>
-								{#each link.children as child}
-									<li>
-										<a
-											href={child.href}
-											rel={child.rel}
-											class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
-											>{child.name}</a
-										>
-									</li>
-								{/each}
-							</ul>
-						{/if}
-					</li>
+					<SidebarDropdown {link} />
 				{:else}
 					<li>
 						<a

package/sidebars/SidebarDropdown.svelte

@@ -0,0 +1,50 @@
+<script >import { slide } from 'svelte/transition';
+export let link;
+let isOpen = false;
+let activeDropdown = undefined;
+const handleDropdown = (id) => {
+    isOpen = !isOpen;
+    activeDropdown = id;
+};
+</script>
+
+<li>
+	<button
+		type="button"
+		on:click={() => handleDropdown(link.id)}
+		class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+		aria-controls="dropdown"
+		data-collapse-toggle="dropdown"
+	>
+		{#if link.icon}
+			<svelte:component this={link.icon} className="h-4 w-4 mr-2" />
+		{/if}
+		<span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item="">{link.name}</span>
+		<svg
+			sidebar-toggle-item=""
+			class="w-6 h-6"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/></svg
+		>
+	</button>
+	{#if isOpen && link.id == activeDropdown}
+		<ul id="dropdown" class="py-2 space-y-2" transition:slide={{ duration: 500 }}>
+			{#each link.children as child}
+				<li>
+					<a
+						href={child.href}
+						rel={child.rel}
+						class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+						>{child.name}</a
+					>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</li>

package/sidebars/SidebarDropdown.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SidebarType } from '../types';
+declare const __propDef: {
+    props: {
+        link: SidebarType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SidebarDropdownProps = typeof __propDef.props;
+export declare type SidebarDropdownEvents = typeof __propDef.events;
+export declare type SidebarDropdownSlots = typeof __propDef.slots;
+export default class SidebarDropdown extends SvelteComponentTyped<SidebarDropdownProps, SidebarDropdownEvents, SidebarDropdownSlots> {
+}
+export {};

package/tabs/FullWidthTabs.svelte

@@ -0,0 +1,31 @@
+<script >export let tabs;
+export let tabLabel;
+</script>
+
+<div class="sm:hidden">
+	<label for="tabs" class="sr-only">{tabLabel}</label>
+	<select
+		id="tabs"
+		class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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"
+	>
+		{#each tabs as { name }}
+			<option>{name}</option>
+		{/each}
+	</select>
+</div>
+<ul
+	class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400"
+>
+	{#each tabs as { name, href, rel, active }}
+		<li class="w-full">
+			<a
+				{href}
+				{rel}
+				class={active
+					? 'inline-block p-4 w-full text-gray-900 bg-gray-100 rounded-l-lg focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white'
+					: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'}
+				aria-current="page">{name}</a
+			>
+		</li>
+	{/each}
+</ul>

package/tabs/FullWidthTabs.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabType } from '../types';
+declare const __propDef: {
+    props: {
+        tabs: TabType[];
+        tabLabel: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FullWidthTabsProps = typeof __propDef.props;
+export declare type FullWidthTabsEvents = typeof __propDef.events;
+export declare type FullWidthTabsSlots = typeof __propDef.slots;
+export default class FullWidthTabs extends SvelteComponentTyped<FullWidthTabsProps, FullWidthTabsEvents, FullWidthTabsSlots> {
+}
+export {};

package/tabs/IconTabs.svelte

@@ -0,0 +1,24 @@
+<script >export let tabs;
+export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300';
+</script>
+
+<div class="border-b border-gray-200 dark:border-gray-700">
+	<ul
+		class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400"
+	>
+		{#each tabs as { name, active, href, rel, icon }}
+			<li class="mr-2">
+				<a
+					{href}
+					{rel}
+					class={active
+						? 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group'
+						: '  inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group '}
+				>
+					<svelte:component this={icon} className={iconClass} />
+					{name}
+				</a>
+			</li>
+		{/each}
+	</ul>
+</div>

package/tabs/IconTabs.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IconTabType } from '../types';
+declare const __propDef: {
+    props: {
+        tabs: IconTabType[];
+        iconClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type IconTabsProps = typeof __propDef.props;
+export declare type IconTabsEvents = typeof __propDef.events;
+export declare type IconTabsSlots = typeof __propDef.slots;
+export default class IconTabs extends SvelteComponentTyped<IconTabsProps, IconTabsEvents, IconTabsSlots> {
+}
+export {};

package/tabs/InteractiveTabHead.svelte

@@ -0,0 +1,53 @@
+<script >import { tabStore } from './tabStore';
+export let tabs;
+export let tabId = 'myTab';
+export let activeTabValue = 1;
+const handleClick = (tabValue) => () => {
+    tabStore.update((n) => (n = tabValue));
+    activeTabValue = tabValue;
+};
+</script>
+
+<!--
+@component
+Header part of Interactive tab component. Use with TabContent.
+
+@param tabs: TabHeadType[];
+@param tabId = 'myTab';
+
+- Usage:
+
+  ```tsx
+  <InteractiveHead>
+    <TabContent>
+      Some HTML|Component|string
+    </TabContent>
+  </InteractiveHead>
+  ```
+  -->
+<div class="mb-4 border-b border-gray-200">
+	<ul
+		class="flex flex-wrap -mb-px text-sm font-medium text-center"
+		id={tabId}
+		data-tabs-toggle="#myTabContent"
+		role="tablist"
+	>
+		{#each tabs as { name, id }}
+			<li class="mr-2" role="presentation">
+				<button
+					on:click={handleClick(id)}
+					class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+					id="{name}-tab"
+					data-tabs-target="#{name}"
+					type="button"
+					role="tab"
+					class:active={activeTabValue === id}
+					aria-controls={name}
+					aria-selected="false">{name}</button
+				>
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<slot />

package/tabs/InteractiveTabHead.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabHeadType } from '../types';
+declare const __propDef: {
+    props: {
+        tabs: TabHeadType[];
+        tabId?: string;
+        activeTabValue?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type InteractiveTabHeadProps = typeof __propDef.props;
+export declare type InteractiveTabHeadEvents = typeof __propDef.events;
+export declare type InteractiveTabHeadSlots = typeof __propDef.slots;
+/**
+ * Header part of Interactive tab component. Use with TabContent.
+ *
+ * @param tabs: TabHeadType[];
+ * @param tabId = 'myTab';
+ *
+ * - Usage:
+ *
+ * ```tsx
+ * <InteractiveHead>
+ *   <TabContent>
+ *     Some HTML|Component|string
+ *   </TabContent>
+ * </InteractiveHead>
+ * ```
+ */
+export default class InteractiveTabHead extends SvelteComponentTyped<InteractiveTabHeadProps, InteractiveTabHeadEvents, InteractiveTabHeadSlots> {
+}
+export {};

package/tabs/InteractiveTabs.svelte

@@ -32,7 +32,7 @@ export let tabs;
 			>
 				{#if typeof content === 'string'}
 					<p class="text-sm text-gray-500 dark:text-gray-400">
-						{content}
+						{@html content}
 					</p>
 				{:else}
 					<svelte:component this={content} />

package/tabs/TabContent.svelte

@@ -0,0 +1,32 @@
+<script >import { tabStore } from './tabStore';
+export let divClass = 'p-4 rounded-lg dark:bg-gray-800';
+export let tab;
+let activeTabValue;
+tabStore.subscribe((value) => {
+    activeTabValue = value;
+});
+</script>
+
+<!--
+@component
+Content part of Interactive tab component. Use with InteractiveHead.
+
+- let tabId = 'myTab';
+- let tabs: TabHeadType;
+- let divClass: string;
+- Usage:
+
+  ```tsx
+  <InteractiveHead>
+    <TabContent>
+      Some HTML|Component|string
+    </TabContent>
+  </InteractiveHead>
+  ```
+-->
+
+{#if activeTabValue === tab.id}
+	<div class={divClass} id="{tab.id}Content" role="tabpanel" aria-labelledby="{tab.name}-tab">
+		<slot />
+	</div>
+{/if}

package/tabs/TabContent.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabHeadType } from '../types';
+declare const __propDef: {
+    props: {
+        divClass?: string;
+        tab: TabHeadType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabContentProps = typeof __propDef.props;
+export declare type TabContentEvents = typeof __propDef.events;
+export declare type TabContentSlots = typeof __propDef.slots;
+/**
+ * Content part of Interactive tab component. Use with InteractiveHead.
+ *
+ * - let tabId = 'myTab';
+ * - let tabs: TabHeadType;
+ * - let divClass: string;
+ * - Usage:
+ *
+ * ```tsx
+ * <InteractiveHead>
+ *   <TabContent>
+ *     Some HTML|Component|string
+ *   </TabContent>
+ * </InteractiveHead>
+ * ```
+ */
+export default class TabContent extends SvelteComponentTyped<TabContentProps, TabContentEvents, TabContentSlots> {
+}
+export {};

package/tabs/UnderlineTabs.svelte

@@ -0,0 +1,20 @@
+<script >export let divClass = 'text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700';
+export let tabs;
+</script>
+
+<div class={divClass}>
+	<ul class="flex flex-wrap -mb-px">
+		{#each tabs as { name, active, href, rel }}
+			<li class="mr-2">
+				<a
+					{href}
+					{rel}
+					class={active
+						? 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500'
+						: '  inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 '}
+					>{name}</a
+				>
+			</li>
+		{/each}
+	</ul>
+</div>

package/tabs/UnderlineTabs.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabType } from '../types';
+declare const __propDef: {
+    props: {
+        divClass?: string;
+        tabs: TabType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type UnderlineTabsProps = typeof __propDef.props;
+export declare type UnderlineTabsEvents = typeof __propDef.events;
+export declare type UnderlineTabsSlots = typeof __propDef.slots;
+export default class UnderlineTabs extends SvelteComponentTyped<UnderlineTabsProps, UnderlineTabsEvents, UnderlineTabsSlots> {
+}
+export {};

package/tabs/tabStore.d.ts

@@ -0,0 +1,2 @@
+import type { Writable } from 'svelte/store';
+export declare const tabStore: Writable<number>;

package/tabs/tabStore.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const tabStore = writable(1);

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>