odj-svelte-ui 0.1.0

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

@@ -0,0 +1,35 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let olClass: string = 'relative border-l border-neutral-200 dark:border-neutral-700';
+ */
+declare const Activity: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    olClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Activity = InstanceType<typeof Activity>;
+export default Activity;

package/dist/elements/timeline/ActivityItem.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { ActivityType } from '../types';
+
+  export let activities: ActivityType[];
+  export let liClass: string = 'mb-10 ml-6';
+  export let spanClass: string = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-neutral-900 dark:bg-blue-900';
+  export let imgClass: string = 'rounded-full shadow-lg';
+  export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-neutral-200 shadow-sm dark:bg-neutral-700 dark:border-neutral-600';
+  export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';
+  export let timeClass: string = 'mb-1 text-xs font-normal text-neutral-400 sm:order-last sm:mb-0';
+  export let titleClass: string = 'text-sm font-normal text-neutral-500 lex dark:text-neutral-300';
+  export let textClass: string = 'p-3 text-xs italic font-normal text-neutral-500 bg-neutral-50 rounded-lg border border-neutral-200 dark:bg-neutral-600 dark:border-neutral-500 dark:text-neutral-300';
+
+  let liCls: string = twMerge(liClass, $$props.classLi);
+  let spanCls: string = twMerge(spanClass, $$props.classSpan);
+  let imgCls: string = twMerge(imgClass, $$props.classImg);
+  let outerDivCls: string = twMerge(outerDivClass, $$props.classOuterDiv);
+  let innerDivCls: string = twMerge(innerDivClass, $$props.classInnerDiv);
+  let timeCls: string = twMerge(timeClass, $$props.classTime);
+  let titleCls: string = twMerge(titleClass, $$props.classTitle);
+  let textCls: string = twMerge(textClass, $$props.classText);
+</script>
+
+{#each activities as { title, date, src, alt, text }}
+  <li class={liCls}>
+    <span class={spanCls}>
+      <img class={imgCls} {src} {alt} />
+    </span>
+    <div class={outerDivCls}>
+      <div class={innerDivCls}>
+        <time class={timeCls}>{date}</time>
+        <div class={titleCls}>
+          {@html title}
+        </div>
+      </div>
+      {#if text}
+        <div class={textCls}>
+          {@html text}
+        </div>
+      {/if}
+    </div>
+  </li>
+{/each}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activities: ActivityType[];
+@prop export let liClass: string = 'mb-10 ml-6';
+@prop export let spanClass: string = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-neutral-900 dark:bg-blue-900';
+@prop export let imgClass: string = 'rounded-full shadow-lg';
+@prop export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-neutral-200 shadow-sm dark:bg-neutral-700 dark:border-neutral-600';
+@prop export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';
+@prop export let timeClass: string = 'mb-1 text-xs font-normal text-neutral-400 sm:order-last sm:mb-0';
+@prop export let titleClass: string = 'text-sm font-normal text-neutral-500 lex dark:text-neutral-300';
+@prop export let textClass: string = 'p-3 text-xs italic font-normal text-neutral-500 bg-neutral-50 rounded-lg border border-neutral-200 dark:bg-neutral-600 dark:border-neutral-500 dark:text-neutral-300';
+-->

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

@@ -0,0 +1,43 @@
+import type { ActivityType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let activities: ActivityType[];
+ * @prop export let liClass: string = 'mb-10 ml-6';
+ * @prop export let spanClass: string = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-neutral-900 dark:bg-blue-900';
+ * @prop export let imgClass: string = 'rounded-full shadow-lg';
+ * @prop export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-neutral-200 shadow-sm dark:bg-neutral-700 dark:border-neutral-600';
+ * @prop export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';
+ * @prop export let timeClass: string = 'mb-1 text-xs font-normal text-neutral-400 sm:order-last sm:mb-0';
+ * @prop export let titleClass: string = 'text-sm font-normal text-neutral-500 lex dark:text-neutral-300';
+ * @prop export let textClass: string = 'p-3 text-xs italic font-normal text-neutral-500 bg-neutral-50 rounded-lg border border-neutral-200 dark:bg-neutral-600 dark:border-neutral-500 dark:text-neutral-300';
+ */
+declare const ActivityItem: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    activities: ActivityType[];
+    liClass?: string | undefined;
+    spanClass?: string | undefined;
+    imgClass?: string | undefined;
+    outerDivClass?: string | undefined;
+    innerDivClass?: string | undefined;
+    timeClass?: string | undefined;
+    titleClass?: string | undefined;
+    textClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ActivityItem = InstanceType<typeof ActivityItem>;
+export default ActivityItem;

package/dist/elements/timeline/Group.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let divClass: string = 'p-5 mb-4 bg-neutral-50 rounded-lg border border-neutral-100 dark:bg-neutral-800 dark:border-neutral-700';
+  export let timeClass: string = 'text-lg font-semibold text-neutral-900 dark:text-white';
+  export let date: Date | string;
+  export let olClass: string = 'mt-3 divide-y divider-neutral-200 dark:divide-neutral-700';
+  let divCls: string = twMerge(divClass, $$props.classDiv);
+  let timeCls: string = twMerge(timeClass, $$props.classTime);
+  let olCls: string = twMerge(olClass, $$props.classOl);
+</script>
+
+<div class={divCls}>
+  <time class={timeCls}>{date}</time>
+  <ol class={olCls}>
+    <slot />
+  </ol>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'p-5 mb-4 bg-neutral-50 rounded-lg border border-neutral-100 dark:bg-neutral-800 dark:border-neutral-700';
+@prop export let timeClass: string = 'text-lg font-semibold text-neutral-900 dark:text-white';
+@prop export let date: Date | string;
+@prop export let olClass: string = 'mt-3 divide-y divider-neutral-200 dark:divide-neutral-700';
+-->

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

@@ -0,0 +1,41 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let divClass: string = 'p-5 mb-4 bg-neutral-50 rounded-lg border border-neutral-100 dark:bg-neutral-800 dark:border-neutral-700';
+ * @prop export let timeClass: string = 'text-lg font-semibold text-neutral-900 dark:text-white';
+ * @prop export let date: Date | string;
+ * @prop export let olClass: string = 'mt-3 divide-y divider-neutral-200 dark:divide-neutral-700';
+ */
+declare const Group: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    divClass?: string | undefined;
+    timeClass?: string | undefined;
+    date: Date | string;
+    olClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Group = InstanceType<typeof Group>;
+export default Group;

package/dist/elements/timeline/GroupItem.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { GroupTimelineType } from '../types';
+
+  export let timelines: GroupTimelineType[];
+  export let aClass: string = 'block items-center p-3 sm:flex hover:bg-neutral-100 dark:hover:bg-neutral-700';
+  export let imgClass: string = 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
+  export let divClass: string = 'text-neutral-600 dark:text-neutral-400';
+  export let titleClass: string = 'text-base font-normal';
+  export let spanClass: string = 'inline-flex items-center text-xs font-normal text-neutral-500 dark:text-neutral-400';
+
+  let aCls: string = twMerge(aClass, $$props.classA);
+  let imgCls: string = twMerge(imgClass, $$props.classImg);
+  let divCls: string = twMerge(divClass, $$props.classDiv);
+  let titleCls: string = twMerge(titleClass, $$props.classTitle);
+  let spanCls: string = twMerge(spanClass, $$props.classSpan);
+</script>
+
+{#each timelines as { title, src, alt, isPrivate, href, comment }}
+  <li>
+    <a {href} class={aCls}>
+      <img class={imgCls} {src} {alt} />
+      <div class={divCls}>
+        <div class={titleCls}>
+          {@html title}
+        </div>
+        {#if comment}
+          <div class="text-sm font-normal">{comment}</div>
+        {/if}
+        <span class={spanCls}>
+          {#if isPrivate}
+            <svg class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
+              <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+            </svg>
+            Private
+          {:else}
+            <svg class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd" />
+            </svg>
+            Public
+          {/if}
+        </span>
+      </div>
+    </a>
+  </li>
+{/each}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let timelines: GroupTimelineType[];
+@prop export let aClass: string = 'block items-center p-3 sm:flex hover:bg-neutral-100 dark:hover:bg-neutral-700';
+@prop export let imgClass: string = 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
+@prop export let divClass: string = 'text-neutral-600 dark:text-neutral-400';
+@prop export let titleClass: string = 'text-base font-normal';
+@prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-neutral-500 dark:text-neutral-400';
+-->

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

@@ -0,0 +1,37 @@
+import type { GroupTimelineType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let timelines: GroupTimelineType[];
+ * @prop export let aClass: string = 'block items-center p-3 sm:flex hover:bg-neutral-100 dark:hover:bg-neutral-700';
+ * @prop export let imgClass: string = 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
+ * @prop export let divClass: string = 'text-neutral-600 dark:text-neutral-400';
+ * @prop export let titleClass: string = 'text-base font-normal';
+ * @prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-neutral-500 dark:text-neutral-400';
+ */
+declare const GroupItem: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    timelines: GroupTimelineType[];
+    aClass?: string | undefined;
+    imgClass?: string | undefined;
+    divClass?: string | undefined;
+    titleClass?: string | undefined;
+    spanClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GroupItem = InstanceType<typeof GroupItem>;
+export default GroupItem;

package/dist/elements/timeline/Timeline.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { setContext } from 'svelte';
+  export let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' = 'default';
+
+  setContext('order', order);
+  let olClasses = {
+    group: 'p-5 mb-4 bg-neutral-50 rounded-lg border border-neutral-100 dark:bg-neutral-800 dark:border-neutral-700',
+    horizontal: 'sm:flex',
+    activity: 'relative border-l border-neutral-200 dark:border-neutral-700',
+    vertical: 'relative border-l border-neutral-200 dark:border-neutral-700',
+    default: 'relative border-l border-neutral-200 dark:border-neutral-700'
+  };
+</script>
+
+<ol class={twMerge(olClasses[order], $$props.class)}>
+  <slot />
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' = 'default';
+-->

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

@@ -0,0 +1,35 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' = 'default';
+ */
+declare const Timeline: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    order?: "default" | "vertical" | "horizontal" | "activity" | "group" | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Timeline = InstanceType<typeof Timeline>;
+export default Timeline;

package/dist/elements/timeline/TimelineItem.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  export let title: string = '';
+  export let date: string = '';
+  export let svgClass: string = 'w-3 h-3 text-primary-600 dark:text-primary-400';
+
+  let order: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' = 'default';
+  order = getContext('order');
+  const liClasses = {
+    default: 'mb-10 ml-4',
+    vertical: 'mb-10 ml-6',
+    horizontal: 'relative mb-6 sm:mb-0',
+    activity: 'mb-10 ml-6',
+    group: ''
+  };
+
+  const divClasses = {
+    default: 'absolute w-3 h-3 bg-neutral-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-neutral-900 dark:bg-neutral-700',
+    vertical: 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-neutral-900 dark:bg-primary-900',
+    horizontal: 'flex items-center',
+    activity: 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-neutral-900 dark:bg-primary-900',
+    group: 'p-5 mb-4 bg-neutral-50 rounded-lg border border-neutral-100 dark:bg-neutral-800 dark:border-neutral-700'
+  };
+
+  const timeClasses = {
+    default: 'mb-1 text-sm font-normal leading-none text-neutral-400 dark:text-neutral-500',
+    vertical: 'block mb-2 text-sm font-normal leading-none text-neutral-400 dark:text-neutral-500',
+    horizontal: 'block mb-2 text-sm font-normal leading-none text-neutral-400 dark:text-neutral-500',
+    activity: 'mb-1 text-xs font-normal text-neutral-400 sm:order-last sm:mb-0',
+    group: 'text-lg font-semibold text-neutral-900 dark:text-white'
+  };
+
+  let liCls: string = twMerge(liClasses[order], $$props.classLi);
+  let divCls: string = twMerge(divClasses[order], $$props.classDiv);
+  let timeCls: string = twMerge(timeClasses[order], $$props.classTime);
+  const h3Cls = twMerge(order === 'vertical' ? 'flex items-center mb-1 text-lg font-semibold text-neutral-900 dark:text-white' : 'text-lg font-semibold text-neutral-900 dark:text-white', $$props.classH3);
+</script>
+
+<li class={liCls}>
+  <div class={divCls} />
+  {#if order !== 'default'}
+    <slot name="icon">
+      <svg aria-hidden="true" class={svgClass} 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>
+    </slot>
+  {:else if date}
+    <time class={timeCls}>{date}</time>
+  {/if}
+
+  {#if title}
+    <h3 class={h3Cls}>
+      {title}
+    </h3>
+  {/if}
+
+  {#if order !== 'default'}
+    {#if date}
+      <time class={timeCls}>{date}</time>
+    {/if}
+  {/if}
+
+  <slot />
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let title: string = '';
+@prop export let date: string = '';
+@prop export let svgClass: string = 'w-3 h-3 text-primary-600 dark:text-primary-400';
+-->

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

@@ -0,0 +1,41 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let title: string = '';
+ * @prop export let date: string = '';
+ * @prop export let svgClass: string = 'w-3 h-3 text-primary-600 dark:text-primary-400';
+ */
+declare const TimelineItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    title?: string | undefined;
+    date?: string | undefined;
+    svgClass?: string | undefined;
+}, {
+    icon: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+}, {}, string>;
+type TimelineItem = InstanceType<typeof TimelineItem>;
+export default TimelineItem;

package/dist/elements/toast/Toast.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import Frame from '../utils/Frame.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import { fade } from 'svelte/transition';
+  import type { Dismissable } from '../types';
+
+  // propagate props type from underying Frame
+  interface $$Props extends ComponentProps<Frame>, Dismissable {
+    color?: 'primary' | 'neutral' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none';
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
+    open?: boolean;
+    divClass?: string;
+    defaultIconClass?: string;
+    extraIconClass?: string;
+    contentClass?: string;
+  }
+
+  export let dismissable: boolean = true;
+  export let color: 'primary' | 'neutral' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
+  export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
+  export let open: boolean = true;
+  export let divClass: string = 'w-full max-w-xs p-4 text-neutral-500 bg-white shadow dark:text-neutral-400 dark:bg-neutral-800 gap-3';
+  export let defaultIconClass: string = 'w-8 h-8';
+  export let contentClass: string = 'w-full text-sm font-normal';
+  export let align: boolean = true;
+
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+
+  const positions = {
+    'top-left': 'absolute top-5 left-5',
+    'top-right': 'absolute top-5 right-5',
+    'bottom-left': 'absolute bottom-5 left-5',
+    'bottom-right': 'absolute bottom-5 right-5',
+    none: ''
+  };
+
+  function close(e: MouseEvent) {
+    e.stopPropagation();
+    open = false;
+  }
+
+  let finalDivClass: string;
+  $: finalDivClass = twMerge('flex', align ? 'items-center' : 'items-start', divClass, positions[position], $$props.class);
+
+  const colors = {
+    primary: 'text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200',
+    neutral: 'text-neutral-500 bg-neutral-100 dark:bg-neutral-700 dark:text-neutral-200',
+    red: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200',
+    green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+    blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
+    indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
+    purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
+    orange: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
+    none: ''
+  };
+
+  let iconClass: string;
+  $: iconClass = twMerge('inline-flex items-center justify-center shrink-0', colors[color], defaultIconClass);
+
+  const clsBtnExtraClass = '-mx-1.5 -my-1.5 text-neutral-400 hover:text-neutral-900 focus:!ring-neutral-300 hover:bg-neutral-100 dark:text-neutral-500 dark:hover:text-white dark:hover:bg-neutral-700';
+</script>
+
+{#if open}
+  <Frame rounded transition={fade} color="none" {...$$restProps} class={finalDivClass} role="alert">
+    {#if $$slots.icon}
+      <Frame rounded color="none" class={iconClass}>
+        <slot name="icon" />
+      </Frame>
+    {/if}
+
+    <div class={contentClass}>
+      <slot />
+    </div>
+
+    {#if dismissable}
+      <slot name="close-button" {close}>
+        <CloseButton class={clsBtnExtraClass} on:click={close} />
+      </slot>
+    {/if}
+  </Frame>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let dismissable: boolean = true;
+@prop export let color: 'primary' | 'neutral' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
+@prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
+@prop export let open: boolean = true;
+@prop export let divClass: string = 'w-full max-w-xs p-4 text-neutral-500 bg-white shadow dark:text-neutral-400 dark:bg-neutral-800 gap-3';
+@prop export let defaultIconClass: string = 'w-8 h-8';
+@prop export let contentClass: string = 'w-full text-sm font-normal';
+@prop export let align: boolean = true;
+-->

package/dist/elements/toast/Toast.svelte.d.ts

@@ -0,0 +1,71 @@
+import type { Dismissable } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let dismissable: boolean = true;
+ * @prop export let color: 'primary' | 'neutral' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
+ * @prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
+ * @prop export let open: boolean = true;
+ * @prop export let divClass: string = 'w-full max-w-xs p-4 text-neutral-500 bg-white shadow dark:text-neutral-400 dark:bg-neutral-800 gap-3';
+ * @prop export let defaultIconClass: string = 'w-8 h-8';
+ * @prop export let contentClass: string = 'w-full text-sm font-normal';
+ * @prop export let align: boolean = true;
+ */
+declare const Toast: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & Dismissable & {
+    color?: "primary" | "neutral" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "orange" | "none";
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "none";
+    open?: boolean;
+    divClass?: string;
+    defaultIconClass?: string;
+    extraIconClass?: string;
+    contentClass?: string;
+}, {
+    icon: {};
+    default: {};
+    'close-button': {
+        close: (e: MouseEvent) => void;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+    'close-button': {
+        close: (e: MouseEvent) => void;
+    };
+}, {}, string>;
+type Toast = InstanceType<typeof Toast>;
+export default Toast;