flowbite-svelte 0.11.0 → 0.12.1

package/timelines/GroupItem.svelte

@@ -0,0 +1,49 @@
+<script >export let timelines;
+</script>
+
+{#each timelines as { title, src, alt, isPrivate, href, comment }}
+	<li>
+		<a {href} class="block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
+			<img class="mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0" {src} {alt} />
+			<div class="text-gray-600 dark:text-gray-400">
+				<div class="text-base font-normal">
+					{@html title}
+				</div>
+				{#if comment}
+					<div class="text-sm font-normal">{comment}</div>
+				{/if}
+				<span class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
+					{#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}

package/timelines/GroupItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GroupTimelineType } from '../types';
+declare const __propDef: {
+    props: {
+        timelines: GroupTimelineType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type GroupItemProps = typeof __propDef.props;
+export declare type GroupItemEvents = typeof __propDef.events;
+export declare type GroupItemSlots = typeof __propDef.slots;
+export default class GroupItem extends SvelteComponentTyped<GroupItemProps, GroupItemEvents, GroupItemSlots> {
+}
+export {};

package/timelines/Timeline.svelte

@@ -0,0 +1,6 @@
+<script >export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+</script>
+
+<ol class={olClass}>
+	<slot />
+</ol>

package/timelines/Timeline.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        olClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TimelineProps = typeof __propDef.props;
+export declare type TimelineEvents = typeof __propDef.events;
+export declare type TimelineSlots = typeof __propDef.slots;
+export default class Timeline extends SvelteComponentTyped<TimelineProps, TimelineEvents, TimelineSlots> {
+}
+export {};

package/timelines/TimelineHorizontal.svelte

@@ -0,0 +1,6 @@
+<script >export let olClass = 'items-center sm:flex';
+</script>
+
+<ol class={olClass}>
+	<slot />
+</ol>

package/timelines/TimelineHorizontal.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        olClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TimelineHorizontalProps = typeof __propDef.props;
+export declare type TimelineHorizontalEvents = typeof __propDef.events;
+export declare type TimelineHorizontalSlots = typeof __propDef.slots;
+export default class TimelineHorizontal extends SvelteComponentTyped<TimelineHorizontalProps, TimelineHorizontalEvents, TimelineHorizontalSlots> {
+}
+export {};

package/timelines/TimelineItem.svelte

@@ -0,0 +1,37 @@
+<script >export let timelineItems;
+</script>
+
+{#each timelineItems as { date, title, text, href, linkname }}
+	<li class="mb-10 ml-4">
+		<div
+			class="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"
+		/>
+		<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+			>{date}</time
+		>
+		<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+			{title}
+		</h3>
+		<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+			{text}
+		</p>
+		{#if href}
+			<a
+				{href}
+				class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+				>{linkname}
+				<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
+				></a
+			>
+		{/if}
+	</li>
+{/each}

package/timelines/TimelineItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TimelineItemType } from '../types';
+declare const __propDef: {
+    props: {
+        timelineItems: TimelineItemType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TimelineItemProps = typeof __propDef.props;
+export declare type TimelineItemEvents = typeof __propDef.events;
+export declare type TimelineItemSlots = typeof __propDef.slots;
+export default class TimelineItem extends SvelteComponentTyped<TimelineItemProps, TimelineItemEvents, TimelineItemSlots> {
+}
+export {};

package/timelines/TimelineItemHorizontal.svelte

@@ -0,0 +1,38 @@
+<script >export let timelineItems;
+</script>
+
+{#each timelineItems as { date, title, text, icon }}
+	<li class="relative mb-6 sm:mb-0">
+		<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"
+			>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4" />
+				{:else}
+					<svg
+						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"
+						/></svg
+					>
+				{/if}
+			</div>
+			<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+		</div>
+		<div class="mt-3 sm:pr-8">
+			<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
+			<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+				>{date}</time
+			>
+			<p class="text-base font-normal text-gray-500 dark:text-gray-400">
+				{text}
+			</p>
+		</div>
+	</li>
+{/each}

package/timelines/TimelineItemHorizontal.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TimelineItemHorizontalType } from '../types';
+declare const __propDef: {
+    props: {
+        timelineItems: TimelineItemHorizontalType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TimelineItemHorizontalProps = typeof __propDef.props;
+export declare type TimelineItemHorizontalEvents = typeof __propDef.events;
+export declare type TimelineItemHorizontalSlots = typeof __propDef.slots;
+export default class TimelineItemHorizontal extends SvelteComponentTyped<TimelineItemHorizontalProps, TimelineItemHorizontalEvents, TimelineItemHorizontalSlots> {
+}
+export {};

package/timelines/TimelineItemVertical.svelte

@@ -0,0 +1,54 @@
+<script >export let timelineItems;
+</script>
+
+{#each timelineItems as { date, title, text, href, linkname, icon }}
+	<li class="mb-10 ml-6">
+		<span
+			class="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"
+		>
+			{#if icon}
+				<svelte:component this={icon} className="h-4 w-4" />
+			{:else}
+				<svg
+					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"
+					/></svg
+				>
+			{/if}
+		</span>
+
+		<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">
+			{title}
+		</h3>
+		<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+			>{date}</time
+		>
+		<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+			{text}
+		</p>
+		{#if href}
+			<a
+				{href}
+				class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+				>{linkname}
+				<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
+				></a
+			>
+		{/if}
+	</li>
+{/each}

package/timelines/TimelineItemVertical.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TimelineItemVerticalType } from '../types';
+declare const __propDef: {
+    props: {
+        timelineItems: TimelineItemVerticalType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TimelineItemVerticalProps = typeof __propDef.props;
+export declare type TimelineItemVerticalEvents = typeof __propDef.events;
+export declare type TimelineItemVerticalSlots = typeof __propDef.slots;
+export default class TimelineItemVertical extends SvelteComponentTyped<TimelineItemVerticalProps, TimelineItemVerticalEvents, TimelineItemVerticalSlots> {
+}
+export {};

package/toasts/Toast.svelte

@@ -1,5 +1,4 @@
 <script >import { fade, blur, fly, slide } from 'svelte/transition';
-import { quintOut } from 'svelte/easing';
 let visible = true;
 const handleHide = () => {
     visible = !visible;

package/types.d.ts

@@ -46,7 +46,11 @@ export interface TabType {
 export interface InteractiveTabType {
     name: string;
     id: number;
-    content: string;
+    content: string | typeof SvelteComponent;
+}
+export interface TabHeadType {
+    name: string;
+    id: number;
 }
 export interface PillTabType {
     name: string;
@@ -54,7 +58,6 @@ export interface PillTabType {
     href: string;
 }
 export interface NavbarType {
-    id: number;
     name: string;
     href: string;
     rel?: string;
@@ -83,6 +86,19 @@ export interface AuthFieldType {
     required?: boolean;
     placeholder?: string;
 }
+export declare type SidebarType = {
+    id: number;
+    name: string;
+    href?: string;
+    icon?: typeof SvelteComponent;
+    rel?: string;
+    children?: SidebarType[];
+    subtext?: HTMLElement;
+};
+export declare type SidebarCtaType = {
+    label: string;
+    text: HTMLElement;
+};
 export declare type SelectOptionType = {
     name: string;
     value: string;
@@ -97,3 +113,44 @@ export interface AvatarType {
     text?: string;
 }
 export declare type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur';
+export interface TimelineItemType {
+    date: Date | string;
+    title: string;
+    icon?: typeof SvelteComponent;
+    href?: string;
+    linkname?: string;
+    text?: HTMLElement | string;
+}
+export interface TimelineItemVerticalType {
+    date: Date | string;
+    title: string;
+    icon?: typeof SvelteComponent;
+    href?: string;
+    linkname?: string;
+    text?: HTMLElement | string;
+}
+export interface TimelineItemHorizontalType {
+    date: Date | string;
+    title: string;
+    icon?: typeof SvelteComponent;
+    text?: HTMLElement | string;
+}
+export interface ActivityType {
+    title: HTMLElement | string;
+    date: Date | string;
+    src: string;
+    alt: string;
+    text?: HTMLElement | string;
+}
+export interface GroupTimelineType {
+    title: string | HTMLElement;
+    src: string;
+    alt: string;
+    href?: string;
+    isPrivate?: boolean;
+    comment?: string | HTMLElement;
+}
+export interface PageType {
+    pageNum: number;
+    href: string;
+}