flowbite-svelte 0.36.5 → 0.37.1

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"}

package/dist/timeline/Timeline.svelte

@@ -15,3 +15,57 @@ let olClasses = {
 <ol class={olClasses[order]}>
   <slot />
 </ol>
+
+<!--
+  @component
+  ## Features
+  [Go to Timeline](https://flowbite-svelte.com/docs/components/timeline#Default_timeline)
+  - Setup
+  - Default timeline
+  - Vertical Timeline
+  - Horizontal Timeline
+  - Activity Log
+  - Grouped timeline
+  ## Props
+  @prop customClass: string = '';
+  @prop order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' | 'custom' = 'default';
+  ## Example
+  ```
+  <script>
+    import { Timeline, TimelineItem, Button } from 'flowbite-svelte';
+  </script>
+
+  <Timeline>
+    <TimelineItem title="Application UI code in Tailwind CSS" date="February 2022">
+      <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+        Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar,
+        and pre-order E-commerce & Marketing pages.
+      </p>
+      <Button color="alternative"
+        >Learn more<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
+        ></Button>
+    </TimelineItem>
+    <TimelineItem title="Application UI code in Tailwind CSS" date="March 2022">
+      <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+        All of the pages and components are first designed in Figma and we keep a parity between the
+        two versions even as we update the project.
+      </p>
+    </TimelineItem>
+    <TimelineItem title="Application UI code in Tailwind CSS" date="April 2022">
+      <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+        Get started with dozens of web components and interactive elements built on top of Tailwind
+        CSS.
+      </p>
+    </TimelineItem>
+  </Timeline>
+  ```
+  
+-->

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

@@ -14,6 +14,57 @@ declare const __propDef: {
 export type TimelineProps = typeof __propDef.props;
 export type TimelineEvents = typeof __propDef.events;
 export type TimelineSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Timeline](https://flowbite-svelte.com/docs/components/timeline#Default_timeline)
+ * - Setup
+ * - Default timeline
+ * - Vertical Timeline
+ * - Horizontal Timeline
+ * - Activity Log
+ * - Grouped timeline
+ * ## Props
+ * @prop customClass: string = '';
+ * @prop order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' | 'custom' = 'default';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Timeline, TimelineItem, Button } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Timeline>
+ *   <TimelineItem title="Application UI code in Tailwind CSS" date="February 2022">
+ *     <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+ *       Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar,
+ *       and pre-order E-commerce & Marketing pages.
+ *     </p>
+ *     <Button color="alternative"
+ *       >Learn more<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
+ *       ></Button>
+ *   </TimelineItem>
+ *   <TimelineItem title="Application UI code in Tailwind CSS" date="March 2022">
+ *     <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+ *       All of the pages and components are first designed in Figma and we keep a parity between the
+ *       two versions even as we update the project.
+ *     </p>
+ *   </TimelineItem>
+ *   <TimelineItem title="Application UI code in Tailwind CSS" date="April 2022">
+ *     <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+ *       Get started with dozens of web components and interactive elements built on top of Tailwind
+ *       CSS.
+ *     </p>
+ *   </TimelineItem>
+ * </Timeline>
+ * ```
+ */
 export default class Timeline extends SvelteComponentTyped<TimelineProps, TimelineEvents, TimelineSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Timeline.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyBD,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":"Timeline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Timeline.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2BD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/timeline/TimelineHorizontal.svelte

@@ -4,3 +4,65 @@
 <ol class={olClass}>
   <slot />
 </ol>
+
+<!--
+  @component
+  ## Features
+  [Go to Horizontal Timeline](https://flowbite-svelte.com/docs/components/timeline#Horizontal_Timeline)
+  - Setup
+  - Default timeline
+  - Vertical Timeline
+  - Horizontal Timeline
+  - Activity Log
+  - Grouped timeline
+  ## Props
+  @prop olClass: string = 'sm:flex';
+  ## Example
+  ```
+  <script>
+    import { Timeline, TimelineItem } from 'flowbite-svelte';
+  </script>
+  
+  <Timeline order="horizontal">
+    <TimelineItem title="Flowbite Library v1.0.0" date="Released on December 2nd, 2021">
+      <svelte:fragment slot="icon">
+          <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">
+                <svg aria-hidden="true" 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"></path></svg>
+            </div>
+            <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+        </div>
+      </svelte:fragment>
+      <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+        Get started with dozens of web components and interactive elements.
+      </p>
+    </TimelineItem>
+    <TimelineItem title="Flowbite Library v1.2.0" date="Released on December 23th, 2021">
+      <svelte:fragment slot="icon">
+          <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">
+                <svg aria-hidden="true" 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"></path></svg>
+            </div>
+            <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+        </div>
+      </svelte:fragment>
+      <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+        Get started with dozens of web components and interactive elements.
+      </p>
+    </TimelineItem>
+    <TimelineItem title="Flowbite Library v1.3.0" date="Released on January 5th, 2021">
+      <svelte:fragment slot="icon">
+          <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">
+                <svg aria-hidden="true" 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"></path></svg>
+            </div>
+            <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+        </div>
+      </svelte:fragment>
+      <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+        Get started with dozens of web components and interactive elements.
+      </p>
+    </TimelineItem>
+  </Timeline>
+  ```
+-->

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

@@ -13,6 +13,66 @@ declare const __propDef: {
 export type TimelineHorizontalProps = typeof __propDef.props;
 export type TimelineHorizontalEvents = typeof __propDef.events;
 export type TimelineHorizontalSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Horizontal Timeline](https://flowbite-svelte.com/docs/components/timeline#Horizontal_Timeline)
+ * - Setup
+ * - Default timeline
+ * - Vertical Timeline
+ * - Horizontal Timeline
+ * - Activity Log
+ * - Grouped timeline
+ * ## Props
+ * @prop olClass: string = 'sm:flex';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Timeline, TimelineItem } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Timeline order="horizontal">
+ *   <TimelineItem title="Flowbite Library v1.0.0" date="Released on December 2nd, 2021">
+ *     <svelte:fragment slot="icon">
+ *         <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">
+ *               <svg aria-hidden="true" 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"></path></svg>
+ *           </div>
+ *           <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+ *       </div>
+ *     </svelte:fragment>
+ *     <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+ *       Get started with dozens of web components and interactive elements.
+ *     </p>
+ *   </TimelineItem>
+ *   <TimelineItem title="Flowbite Library v1.2.0" date="Released on December 23th, 2021">
+ *     <svelte:fragment slot="icon">
+ *         <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">
+ *               <svg aria-hidden="true" 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"></path></svg>
+ *           </div>
+ *           <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+ *       </div>
+ *     </svelte:fragment>
+ *     <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+ *       Get started with dozens of web components and interactive elements.
+ *     </p>
+ *   </TimelineItem>
+ *   <TimelineItem title="Flowbite Library v1.3.0" date="Released on January 5th, 2021">
+ *     <svelte:fragment slot="icon">
+ *         <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">
+ *               <svg aria-hidden="true" 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"></path></svg>
+ *           </div>
+ *           <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
+ *       </div>
+ *     </svelte:fragment>
+ *     <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+ *       Get started with dozens of web components and interactive elements.
+ *     </p>
+ *   </TimelineItem>
+ * </Timeline>
+ * ```
+ */
 export default class TimelineHorizontal extends SvelteComponentTyped<TimelineHorizontalProps, TimelineHorizontalEvents, TimelineHorizontalSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TimelineHorizontal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineHorizontal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAWD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"TimelineHorizontal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineHorizontal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/timeline/TimelineItem.svelte

@@ -124,3 +124,59 @@ const h3Class = classNames(order === 'vertical'
     <slot />
   {/if}
 </li>
+
+<!--
+  @component
+  ## Features
+  [Go to Timeline](https://flowbite-svelte.com/docs/components/timeline)
+  - Setup
+  - Default timeline
+  - Vertical Timeline
+  - Horizontal Timeline
+  - Activity Log
+  - Grouped timeline
+  ## Props
+  @prop title: string = '';
+  @prop date: string = '';
+  @prop customDiv: string = '';
+  @prop customTimeClass: string = '';
+  ## Example
+  ```
+  <script>
+    import { Timeline, TimelineItem, Button } from 'flowbite-svelte';
+  </script>
+  
+  <Timeline>
+    <TimelineItem title="Application UI code in Tailwind CSS" date="February 2022">
+      <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+        Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar,
+        and pre-order E-commerce & Marketing pages.
+      </p>
+      <Button color="alternative"
+        >Learn more<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
+        ></Button>
+    </TimelineItem>
+    <TimelineItem title="Application UI code in Tailwind CSS" date="March 2022">
+      <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+        All of the pages and components are first designed in Figma and we keep a parity between the
+        two versions even as we update the project.
+      </p>
+    </TimelineItem>
+    <TimelineItem title="Application UI code in Tailwind CSS" date="April 2022">
+      <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+        Get started with dozens of web components and interactive elements built on top of Tailwind
+        CSS.
+      </p>
+    </TimelineItem>
+  </Timeline>
+  ```
+  
+-->