flowbite-svelte 0.36.4 → 0.37.1

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

@@ -36,91 +36,147 @@ const h3Class = classNames(order === 'vertical'
 </script>
 
 <li class={liClasses[order]}>
-	{#if order === 'default'}
-		<div class={divClasses[order]} />
-		{#if date}
-			<time class={timeClasses[order]}>{date}</time>
-		{/if}
-		{#if title}
-			<h3 class={h3Class}>
-				{title}
-			</h3>
-		{/if}
-		<slot />
-	{:else if order === 'vertical'}
-		<div class={divClasses[order]} />
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{:else}
-			<svg
-				aria-hidden="true"
-				class="w-3 h-3 text-blue-600 dark:text-blue-400"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-					clip-rule="evenodd" /></svg>
-		{/if}
-		{#if title}
-			<h3 class={h3Class}>
-				{title}
-			</h3>
-		{/if}
-		{#if date}
-			<time class={timeClasses[order]}>{date}</time>
-		{/if}
-		<slot />
-	{:else if order === 'horizontal'}
-		<div class={divClasses[order]} />
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{:else}
-			<svg
-				aria-hidden="true"
-				class="w-3 h-3 text-blue-600 dark:text-blue-400"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-					clip-rule="evenodd" /></svg>
-		{/if}
-		{#if title}
-			<h3 class={h3Class}>
-				{title}
-			</h3>
-		{/if}
-		{#if date}
-			<time class={timeClasses[order]}>{date}</time>
-		{/if}
-		<slot />
-	{:else}
-		<div class={divClasses[order]} />
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{:else}
-			<svg
-				aria-hidden="true"
-				class="w-3 h-3 text-blue-600 dark:text-blue-400"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-					clip-rule="evenodd" /></svg>
-		{/if}
-		{#if title}
-			<h3 class={h3Class}>
-				{title}
-			</h3>
-		{/if}
-		{#if date}
-			<time class={timeClasses[order]}>{date}</time>
-		{/if}
-		<slot />
-	{/if}
+  {#if order === 'default'}
+    <div class={divClasses[order]} />
+    {#if date}
+      <time class={timeClasses[order]}>{date}</time>
+    {/if}
+    {#if title}
+      <h3 class={h3Class}>
+        {title}
+      </h3>
+    {/if}
+    <slot />
+  {:else if order === 'vertical'}
+    <div class={divClasses[order]} />
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {:else}
+      <svg
+        aria-hidden="true"
+        class="w-3 h-3 text-blue-600 dark:text-blue-400"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+          clip-rule="evenodd" /></svg>
+    {/if}
+    {#if title}
+      <h3 class={h3Class}>
+        {title}
+      </h3>
+    {/if}
+    {#if date}
+      <time class={timeClasses[order]}>{date}</time>
+    {/if}
+    <slot />
+  {:else if order === 'horizontal'}
+    <div class={divClasses[order]} />
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {:else}
+      <svg
+        aria-hidden="true"
+        class="w-3 h-3 text-blue-600 dark:text-blue-400"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+          clip-rule="evenodd" /></svg>
+    {/if}
+    {#if title}
+      <h3 class={h3Class}>
+        {title}
+      </h3>
+    {/if}
+    {#if date}
+      <time class={timeClasses[order]}>{date}</time>
+    {/if}
+    <slot />
+  {:else}
+    <div class={divClasses[order]} />
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {:else}
+      <svg
+        aria-hidden="true"
+        class="w-3 h-3 text-blue-600 dark:text-blue-400"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+          clip-rule="evenodd" /></svg>
+    {/if}
+    {#if title}
+      <h3 class={h3Class}>
+        {title}
+      </h3>
+    {/if}
+    {#if date}
+      <time class={timeClasses[order]}>{date}</time>
+    {/if}
+    <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>
+  ```
+  
+-->

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

@@ -17,6 +17,59 @@ declare const __propDef: {
 export type TimelineItemProps = typeof __propDef.props;
 export type TimelineItemEvents = typeof __propDef.events;
 export type TimelineItemSlots = typeof __propDef.slots;
+/**
+ * ## 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>
+ * ```
+ */
 export default class TimelineItem extends SvelteComponentTyped<TimelineItemProps, TimelineItemEvents, TimelineItemSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoHD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAAwC,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":"TimelineItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqHD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAAwC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}