flowbite-svelte 0.36.5 → 0.37.2

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

@@ -4,6 +4,8 @@ export let title = '';
 export let date = '';
 export let customDiv = '';
 export let customTimeClass = '';
+export let customLiClass = '';
+export let svgClass = 'w-3 h-3 text-primary-600 dark:text-primary-400';
 let order = 'default';
 order = getContext('order');
 const liClasses = {
@@ -12,13 +14,13 @@ const liClasses = {
     horizontal: 'relative mb-6 sm:mb-0',
     activity: 'mb-10 ml-6',
     group: '',
-    custom: ''
+    custom: customLiClass
 };
 const divClasses = {
     default: 'absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700',
-    vertical: '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',
+    vertical: 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900',
     horizontal: 'flex items-center',
-    activity: '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',
+    activity: 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900',
     group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
     custom: customDiv
 };
@@ -54,7 +56,7 @@ const h3Class = classNames(order === 'vertical'
     {:else}
       <svg
         aria-hidden="true"
-        class="w-3 h-3 text-blue-600 dark:text-blue-400"
+        class={svgClass}
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -79,7 +81,7 @@ const h3Class = classNames(order === 'vertical'
     {:else}
       <svg
         aria-hidden="true"
-        class="w-3 h-3 text-blue-600 dark:text-blue-400"
+        class={svgClass}
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -104,7 +106,7 @@ const h3Class = classNames(order === 'vertical'
     {:else}
       <svg
         aria-hidden="true"
-        class="w-3 h-3 text-blue-600 dark:text-blue-400"
+        class={svgClass}
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -124,3 +126,61 @@ 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 = '';
+  @prop customLiClass: string ='';
+  @prop svgCl
+  ## 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

@@ -5,6 +5,8 @@ declare const __propDef: {
         date?: string | undefined;
         customDiv?: string | undefined;
         customTimeClass?: string | undefined;
+        customLiClass?: string | undefined;
+        svgClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,6 +19,61 @@ 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 = '';
+ * @prop customLiClass: string ='';
+ * @prop svgCl
+ * ## 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;AAmHD,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;AAwHD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/timeline/TimelineItemHorizontal.svelte

@@ -48,3 +48,70 @@ export let icon;
       ></a>
   {/if}
 </li>
+
+<!--
+  @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 title: string;
+  @prop date: string;
+  @prop href: string;
+  @prop text: string;
+  @prop linkname: string;
+  @prop icon: string;  
+  ## 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/TimelineItemHorizontal.svelte.d.ts

@@ -16,6 +16,71 @@ declare const __propDef: {
 export type TimelineItemHorizontalProps = typeof __propDef.props;
 export type TimelineItemHorizontalEvents = typeof __propDef.events;
 export type TimelineItemHorizontalSlots = 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 title: string;
+ * @prop date: string;
+ * @prop href: string;
+ * @prop text: string;
+ * @prop linkname: string;
+ * @prop icon: string;
+ * ## 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 TimelineItemHorizontal extends SvelteComponentTyped<TimelineItemHorizontalProps, TimelineItemHorizontalEvents, TimelineItemHorizontalSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TimelineItemHorizontal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItemHorizontal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsCD,QAAA,MAAM,SAAS;;eADoG,MAAM;cAAQ,MAAM;cAAQ,MAAM;cAAQ,MAAM;kBAAY,MAAM;cAAQ,MAAM;;;;;;CAC5I,CAAC;AACxD,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjE,MAAM,MAAM,4BAA4B,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnE,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjE,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,oBAAoB,CAAC,2BAA2B,EAAE,4BAA4B,EAAE,2BAA2B,CAAC;CAC/J"}
+{"version":3,"file":"TimelineItemHorizontal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItemHorizontal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwCD,QAAA,MAAM,SAAS;;eADoG,MAAM;cAAQ,MAAM;cAAQ,MAAM;cAAQ,MAAM;kBAAY,MAAM;cAAQ,MAAM;;;;;;CAC5I,CAAC;AACxD,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjE,MAAM,MAAM,4BAA4B,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnE,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,oBAAoB,CAAC,2BAA2B,EAAE,4BAA4B,EAAE,2BAA2B,CAAC;CAC/J"}