flowbite-svelte 0.36.4 → 0.37.1

package/dist/tabs/Tabs.svelte.d.ts

@@ -28,6 +28,52 @@ declare const __propDef: {
 export type TabsProps = typeof __propDef.props;
 export type TabsEvents = typeof __propDef.events;
 export type TabsSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Tab](https://flowbite-svelte.com/docs/components/tab)
+ * - Setup
+ * - Default tabs
+ * - Tabs with underline
+ * - Tabs with icons
+ * - Pills tabs
+ * - Full width tabs
+ * - Components in tab contents
+ * - Custom style
+ * ## Props
+ * @prop style: 'full' | 'pill' | 'underline' | 'none' = 'none';
+ * @prop defaultClass: string = 'flex flex-wrap space-x-2';
+ * @prop contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
+ * @prop divider: boolean = true;
+ * @prop activeClasses: string =
+ *   'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
+ * @prop 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';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Tabs, TabItem } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Tabs>
+ *   <TabItem open title="Profile">
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ *   <TabItem title="Settings">
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ *   <TabItem title="Users">
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Users:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ *   <TabItem title="Dashboard">
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ *   <TabItem disabled>
+ *     <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Disabled:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ * </Tabs>
+ * ```
+ */
 export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
 }
 export {};

package/dist/tabs/Tabs.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tabs/Tabs.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;CACjC;AAqEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tabs/Tabs.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;CACjC;AAuEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}

package/dist/timeline/Activity.svelte

@@ -2,5 +2,51 @@
 </script>
 
 <ol class={olClass}>
-	<slot />
+  <slot />
 </ol>
+
+<!--
+  @component
+  ## Features
+  [Go to Timeline Activity Log](https://flowbite-svelte.com/docs/components/timeline#Activity_Log)
+  - Setup
+  - Default timeline
+  - Vertical Timeline
+  - Horizontal Timeline
+  - Activity Log
+  - Grouped timeline
+  ## Props
+  @prop olClass: string = 'relative border-l border-gray-200 dark:border-gray-700';
+  ## Example
+  ```
+  <script>
+    import { Activity, ActivityItem } from 'flowbite-svelte';
+    let activities = [
+      {
+        title:
+          'Bonnie moved <a href="/" class="font-semibold text-blue-600 dark:text-blue-500 hover:underline">Jese Leos</a> to <span class="bg-gray-100 text-gray-800 text-xs font-normal mr-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">Funny Group</span>',
+        date: 'just now',
+        alt: 'image alt here',
+        src: '/images/profile-picture-2.webp'
+      },
+      {
+        title: 'We don’t serve their kind here! What? Your droids. ',
+        date: '2 hours ago',
+        alt: 'image alt here',
+        src: '/images/profile-picture-2.webp',
+        text: 'The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. '
+      },
+      {
+        title: 'They’ll have to wait outside. We don’t want them here. ',
+        date: '1 day ago',
+        alt: 'image alt here',
+        src: '/images/profile-picture-3.webp'
+      }
+    ];
+  </script>
+
+  <Activity>
+    <ActivityItem {activities} />
+  </Activity>
+  ```
+-->

package/dist/timeline/Activity.svelte.d.ts

@@ -13,6 +13,50 @@ declare const __propDef: {
 export type ActivityProps = typeof __propDef.props;
 export type ActivityEvents = typeof __propDef.events;
 export type ActivitySlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Timeline Activity Log](https://flowbite-svelte.com/docs/components/timeline#Activity_Log)
+ * - Setup
+ * - Default timeline
+ * - Vertical Timeline
+ * - Horizontal Timeline
+ * - Activity Log
+ * - Grouped timeline
+ * ## Props
+ * @prop olClass: string = 'relative border-l border-gray-200 dark:border-gray-700';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Activity, ActivityItem } from 'flowbite-svelte';
+ *   let activities = [
+ *     {
+ *       title:
+ *         'Bonnie moved <a href="/" class="font-semibold text-blue-600 dark:text-blue-500 hover:underline">Jese Leos</a> to <span class="bg-gray-100 text-gray-800 text-xs font-normal mr-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">Funny Group</span>',
+ *       date: 'just now',
+ *       alt: 'image alt here',
+ *       src: '/images/profile-picture-2.webp'
+ *     },
+ *     {
+ *       title: 'We don’t serve their kind here! What? Your droids. ',
+ *       date: '2 hours ago',
+ *       alt: 'image alt here',
+ *       src: '/images/profile-picture-2.webp',
+ *       text: 'The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. '
+ *     },
+ *     {
+ *       title: 'They’ll have to wait outside. We don’t want them here. ',
+ *       date: '1 day ago',
+ *       alt: 'image alt here',
+ *       src: '/images/profile-picture-3.webp'
+ *     }
+ *   ];
+ * </script>
+ *
+ * <Activity>
+ *   <ActivityItem {activities} />
+ * </Activity>
+ * ```
+ */
 export default class Activity extends SvelteComponentTyped<ActivityProps, ActivityEvents, ActivitySlots> {
 }
 export {};

package/dist/timeline/Activity.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Activity.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Activity.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAWD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Activity.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Activity.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/timeline/ActivityItem.svelte

@@ -2,28 +2,71 @@
 </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>
+  <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}
+
+<!--
+  @component
+  ## Features
+  [Go to Timeline Activity Log](https://flowbite-svelte.com/docs/components/timeline#Activity_Log)
+  - Setup
+  - Default timeline
+  - Vertical Timeline
+  - Horizontal Timeline
+  - Activity Log
+  - Grouped timeline
+  ## Props
+  @prop activities: ActivityType[];
+  ## Example
+  ```
+  <script>
+    import { Activity, ActivityItem } from 'flowbite-svelte';
+    let activities = [
+      {
+        title:
+          'Bonnie moved <a href="/" class="font-semibold text-blue-600 dark:text-blue-500 hover:underline">Jese Leos</a> to <span class="bg-gray-100 text-gray-800 text-xs font-normal mr-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">Funny Group</span>',
+        date: 'just now',
+        alt: 'image alt here',
+        src: '/images/profile-picture-2.webp'
+      },
+      {
+        title: 'We don’t serve their kind here! What? Your droids. ',
+        date: '2 hours ago',
+        alt: 'image alt here',
+        src: '/images/profile-picture-2.webp',
+        text: 'The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. '
+      },
+      {
+        title: 'They’ll have to wait outside. We don’t want them here. ',
+        date: '1 day ago',
+        alt: 'image alt here',
+        src: '/images/profile-picture-3.webp'
+      }
+    ];
+  </script>
+
+  <Activity>
+    <ActivityItem {activities} />
+  </Activity>
+  ```
+-->

package/dist/timeline/ActivityItem.svelte.d.ts

@@ -12,6 +12,50 @@ declare const __propDef: {
 export type ActivityItemProps = typeof __propDef.props;
 export type ActivityItemEvents = typeof __propDef.events;
 export type ActivityItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Timeline Activity Log](https://flowbite-svelte.com/docs/components/timeline#Activity_Log)
+ * - Setup
+ * - Default timeline
+ * - Vertical Timeline
+ * - Horizontal Timeline
+ * - Activity Log
+ * - Grouped timeline
+ * ## Props
+ * @prop activities: ActivityType[];
+ * ## Example
+ * ```
+ * <script>
+ *   import { Activity, ActivityItem } from 'flowbite-svelte';
+ *   let activities = [
+ *     {
+ *       title:
+ *         'Bonnie moved <a href="/" class="font-semibold text-blue-600 dark:text-blue-500 hover:underline">Jese Leos</a> to <span class="bg-gray-100 text-gray-800 text-xs font-normal mr-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">Funny Group</span>',
+ *       date: 'just now',
+ *       alt: 'image alt here',
+ *       src: '/images/profile-picture-2.webp'
+ *     },
+ *     {
+ *       title: 'We don’t serve their kind here! What? Your droids. ',
+ *       date: '2 hours ago',
+ *       alt: 'image alt here',
+ *       src: '/images/profile-picture-2.webp',
+ *       text: 'The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. '
+ *     },
+ *     {
+ *       title: 'They’ll have to wait outside. We don’t want them here. ',
+ *       date: '1 day ago',
+ *       alt: 'image alt here',
+ *       src: '/images/profile-picture-3.webp'
+ *     }
+ *   ];
+ * </script>
+ *
+ * <Activity>
+ *   <ActivityItem {activities} />
+ * </Activity>
+ * ```
+ */
 export default class ActivityItem extends SvelteComponentTyped<ActivityItemProps, ActivityItemEvents, ActivityItemSlots> {
 }
 export {};

package/dist/timeline/ActivityItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/ActivityItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA8B7C,QAAA,MAAM,SAAS;;oBAD0C,YAAY,EAAE;;;;;;CAChB,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"ActivityItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/ActivityItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAgC7C,QAAA,MAAM,SAAS;;oBAD0C,YAAY,EAAE;;;;;;CAChB,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/timeline/Group.svelte

@@ -4,8 +4,55 @@ 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>
+  <time class={timeClass}>{date}</time>
+  <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
+    <slot />
+  </ol>
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Grouped Timeline](https://flowbite-svelte.com/docs/components/timeline#Grouped_timeline)
+  - Setup
+  - Default timeline
+  - Vertical Timeline
+  - Horizontal Timeline
+  - Activity Log
+  - Grouped timeline
+  ## Props
+  @prop divClass: string = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
+  @prop timeClass: string = 'text-lg font-semibold text-gray-900 dark:text-white';
+  @prop date: Date | string;
+  ## Example
+  ```
+  <script>
+    import { Group, GroupItem } from 'flowbite-svelte';
+    let groupTimelines = [
+      {
+        title:
+          '<span class="font-medium text-gray-900 dark:text-white">Jese Leos</span> likes <span class="font-medium text-gray-900 dark:text-white">Bonnie Green\'s</span> post in <span class="font-medium text-gray-900 dark:text-white"> How to start with Flowbite library</span>',
+        src: '/images/profile-picture-1.webp',
+        alt: 'alt here',
+        href: '/',
+        isPrivate: true,
+        comment: '"I wanted to share a webinar zeroheight."'
+      },
+      {
+        title:
+          '<span class="font-medium text-gray-900 dark:text-white">Bonnie Green</span> react to <span class="font-medium text-gray-900 dark:text-white">Thomas Lean\'s</span> comment',
+        src: '/images/profile-picture-2.webp',
+        alt: 'alt here',
+        href: '/',
+        isPrivate: true,
+        comment: '"I wanted to share a webinar zeroheight."'
+      }
+    ];
+  </script>
+
+  <Group date="January 13th, 2022">
+    <GroupItem timelines={groupTimelines} />
+  </Group>
+  ```
+  
+-->

package/dist/timeline/Group.svelte.d.ts

@@ -15,6 +15,50 @@ declare const __propDef: {
 export type GroupProps = typeof __propDef.props;
 export type GroupEvents = typeof __propDef.events;
 export type GroupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Grouped Timeline](https://flowbite-svelte.com/docs/components/timeline#Grouped_timeline)
+ * - Setup
+ * - Default timeline
+ * - Vertical Timeline
+ * - Horizontal Timeline
+ * - Activity Log
+ * - Grouped timeline
+ * ## Props
+ * @prop divClass: string = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
+ * @prop timeClass: string = 'text-lg font-semibold text-gray-900 dark:text-white';
+ * @prop date: Date | string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Group, GroupItem } from 'flowbite-svelte';
+ *   let groupTimelines = [
+ *     {
+ *       title:
+ *         '<span class="font-medium text-gray-900 dark:text-white">Jese Leos</span> likes <span class="font-medium text-gray-900 dark:text-white">Bonnie Green\'s</span> post in <span class="font-medium text-gray-900 dark:text-white"> How to start with Flowbite library</span>',
+ *       src: '/images/profile-picture-1.webp',
+ *       alt: 'alt here',
+ *       href: '/',
+ *       isPrivate: true,
+ *       comment: '"I wanted to share a webinar zeroheight."'
+ *     },
+ *     {
+ *       title:
+ *         '<span class="font-medium text-gray-900 dark:text-white">Bonnie Green</span> react to <span class="font-medium text-gray-900 dark:text-white">Thomas Lean\'s</span> comment',
+ *       src: '/images/profile-picture-2.webp',
+ *       alt: 'alt here',
+ *       href: '/',
+ *       isPrivate: true,
+ *       comment: '"I wanted to share a webinar zeroheight."'
+ *     }
+ *   ];
+ * </script>
+ *
+ * <Group date="January 13th, 2022">
+ *   <GroupItem timelines={groupTimelines} />
+ * </Group>
+ * ```
+ */
 export default class Group extends SvelteComponentTyped<GroupProps, GroupEvents, GroupSlots> {
 }
 export {};

package/dist/timeline/Group.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Group.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBD,QAAA,MAAM,SAAS;;;;cAD2G,IAAI,GAAG,MAAM;;;;;;;;CAChF,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Group.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Group.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;cAD2G,IAAI,GAAG,MAAM;;;;;;;;CAChF,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/timeline/GroupItem.svelte

@@ -2,48 +2,88 @@
 </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>
+  <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}
+
+<!--
+  @component
+  ## Features
+  [Go to Grouped Timeline](https://flowbite-svelte.com/docs/components/timeline#Grouped_timeline)
+  - Setup
+  - Default timeline
+  - Vertical Timeline
+  - Horizontal Timeline
+  - Activity Log
+  - Grouped timeline
+  ## Props
+  @prop timelines: GroupTimelineType[];
+  ## Example
+  ```
+  <script>
+    import { Group, GroupItem } from 'flowbite-svelte';
+    let groupTimelines = [
+      {
+        title:
+          '<span class="font-medium text-gray-900 dark:text-white">Jese Leos</span> likes <span class="font-medium text-gray-900 dark:text-white">Bonnie Green\'s</span> post in <span class="font-medium text-gray-900 dark:text-white"> How to start with Flowbite library</span>',
+        src: '/images/profile-picture-1.webp',
+        alt: 'alt here',
+        href: '/',
+        isPrivate: true,
+        comment: '"I wanted to share a webinar zeroheight."'
+      },
+      {
+        title:
+          '<span class="font-medium text-gray-900 dark:text-white">Bonnie Green</span> react to <span class="font-medium text-gray-900 dark:text-white">Thomas Lean\'s</span> comment',
+        src: '/images/profile-picture-2.webp',
+        alt: 'alt here',
+        href: '/',
+        isPrivate: true,
+        comment: '"I wanted to share a webinar zeroheight."'
+      }
+    ];
+  </script>
+
+  <Group date="January 13th, 2022">
+    <GroupItem timelines={groupTimelines} />
+  </Group>
+  ```
+  
+-->

package/dist/timeline/GroupItem.svelte.d.ts

@@ -12,6 +12,48 @@ declare const __propDef: {
 export type GroupItemProps = typeof __propDef.props;
 export type GroupItemEvents = typeof __propDef.events;
 export type GroupItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Grouped Timeline](https://flowbite-svelte.com/docs/components/timeline#Grouped_timeline)
+ * - Setup
+ * - Default timeline
+ * - Vertical Timeline
+ * - Horizontal Timeline
+ * - Activity Log
+ * - Grouped timeline
+ * ## Props
+ * @prop timelines: GroupTimelineType[];
+ * ## Example
+ * ```
+ * <script>
+ *   import { Group, GroupItem } from 'flowbite-svelte';
+ *   let groupTimelines = [
+ *     {
+ *       title:
+ *         '<span class="font-medium text-gray-900 dark:text-white">Jese Leos</span> likes <span class="font-medium text-gray-900 dark:text-white">Bonnie Green\'s</span> post in <span class="font-medium text-gray-900 dark:text-white"> How to start with Flowbite library</span>',
+ *       src: '/images/profile-picture-1.webp',
+ *       alt: 'alt here',
+ *       href: '/',
+ *       isPrivate: true,
+ *       comment: '"I wanted to share a webinar zeroheight."'
+ *     },
+ *     {
+ *       title:
+ *         '<span class="font-medium text-gray-900 dark:text-white">Bonnie Green</span> react to <span class="font-medium text-gray-900 dark:text-white">Thomas Lean\'s</span> comment',
+ *       src: '/images/profile-picture-2.webp',
+ *       alt: 'alt here',
+ *       href: '/',
+ *       isPrivate: true,
+ *       comment: '"I wanted to share a webinar zeroheight."'
+ *     }
+ *   ];
+ * </script>
+ *
+ * <Group date="January 13th, 2022">
+ *   <GroupItem timelines={groupTimelines} />
+ * </Group>
+ * ```
+ */
 export default class GroupItem extends SvelteComponentTyped<GroupItemProps, GroupItemEvents, GroupItemSlots> {
 }
 export {};

package/dist/timeline/GroupItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/GroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAgClD,QAAA,MAAM,SAAS;;mBADuC,iBAAiB,EAAE;;;;;;CAClB,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"GroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/GroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAkClD,QAAA,MAAM,SAAS;;mBADuC,iBAAiB,EAAE;;;;;;CAClB,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}