flowbite-svelte 0.36.5 → 0.37.2

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

@@ -30,6 +30,53 @@ declare const __propDef: {
 export type TabItemProps = typeof __propDef.props;
 export type TabItemEvents = typeof __propDef.events;
 export type TabItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Tab](https://flowbite-svelte.com/docs/components/tab)
+ * ## Props
+ * @prop open: boolean = false;
+ * @prop title: string = 'Tab title';
+ * @prop activeClasses: string | undefined = undefined;
+ * @prop inactiveClasses: string | undefined = undefined;
+ * @prop defaultClass: string =
+ *   'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+ * ## Event
+ * - on:blur
+ * - on:click
+ * - on:contextmenu
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * ## 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 TabItem extends SvelteComponentTyped<TabItemProps, TabItemEvents, TabItemSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TabItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tabs/TabItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;wBADgL,MAAM,GAAG,SAAS;0BAAoB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzK,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"TabItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tabs/TabItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8DD,QAAA,MAAM,SAAS;;;;;wBADgL,MAAM,GAAG,SAAS;0BAAoB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzK,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/tabs/Tabs.svelte

@@ -1,17 +1,4 @@
 <script context="module">import { writable } from 'svelte/store';
-// 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-blue-300 focus:outline-none dark:bg-gray-700 dark:text-white',
-    pill: 'py-3 px-4 text-white bg-blue-600 rounded-lg',
-    underline: 'p-4 text-blue-600 border-b-2 border-blue-600 dark:text-blue-500 dark:border-blue-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-blue-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: ''
-};
 </script>
 
 <script>import classNames from 'classnames';
@@ -20,8 +7,21 @@ export let style = 'none';
 export let defaultClass = 'flex flex-wrap space-x-2';
 export let contentClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
 export let divider = true;
-export let activeClasses = 'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
+export let activeClasses = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
 export let inactiveClasses = '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 = {
     activeClasses: styledActiveClasses[style] || activeClasses,
     inactiveClasses: styledInactiveClasses[style] || inactiveClasses,
@@ -48,3 +48,51 @@ $: ulClass = classNames(defaultClass, style === 'underline' && '-mb-px', $$props
   </slot>
 {/if}
 <div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init />
+
+<!--
+  @component
+  ## 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-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-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>
+  ```
+-->

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-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-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;AAyEH,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

@@ -4,3 +4,49 @@
 <ol class={olClass}>
   <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

@@ -24,3 +24,49 @@
     </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

@@ -9,3 +9,50 @@ export let date;
     <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;AAiBD,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

@@ -42,3 +42,48 @@
     </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"}