flowbite-svelte 0.25.14 → 0.25.17

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.25.17](https://github.com/themesberg/flowbite-svelte/compare/v0.25.16...v0.25.17) (2022-08-27)
+
+
+### Features
+
+* combine Accordionflush and AccordionItem ([e53fa64](https://github.com/themesberg/flowbite-svelte/commit/e53fa6421ca747ed46d6432b67715b3eedf4cbba))
+
+
+### Bug Fixes
+
+* textarea docs ([133b933](https://github.com/themesberg/flowbite-svelte/commit/133b9334841ac13d82c3a86bc24b3375de0972ff))
+
+### [0.25.16](https://github.com/themesberg/flowbite-svelte/compare/v0.25.15...v0.25.16) (2022-08-25)
+
+
+### Features
+
+* create utilities/closebutton, label, and toolbar ([3ad9775](https://github.com/themesberg/flowbite-svelte/commit/3ad9775ffbed66908cbaa82845b86151e179d534))
+* toolbar ([f02ff55](https://github.com/themesberg/flowbite-svelte/commit/f02ff558fa938913c32117ff51b46bdd6088e38a))
+* toolbar w/html ([93116c3](https://github.com/themesberg/flowbite-svelte/commit/93116c34b4063eb9d166d85ef3dd7e20126fa29e))
+
+### [0.25.15](https://github.com/themesberg/flowbite-svelte/compare/v0.25.14...v0.25.15) (2022-08-25)
+
+
+### Bug Fixes
+
+* removed drawer component and page from the main ([5cf77f0](https://github.com/themesberg/flowbite-svelte/commit/5cf77f008aff26e64bd210a3bdf60e5f25aebc89))
+
 ### [0.25.14](https://github.com/themesberg/flowbite-svelte/compare/v0.25.13...v0.25.14) (2022-08-25)
 
 

package/accordions/AccordionItem.svelte

@@ -1,34 +1,25 @@
 <script>import classNames from 'classnames';
 import { slide } from 'svelte/transition';
-import { onMount } from 'svelte';
-import { ChevronDown, ChevronUp } from 'svelte-heros';
+export let flush = false;
 export let id = '';
-export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
+export let slotClass = 'border-gray-200 dark:border-gray-700';
+let classSlot = classNames(slotClass, flush ? 'py-5 border-b' : 'p-5 border border-t-0');
 export let isOpen = false;
 export let color = false;
-export let icons = {
-    up: ChevronUp,
-    down: ChevronDown
-};
-export let iconSize = 24;
-export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
-export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
-export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800  hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
-$: btnClass;
-onMount(() => {
-    if (isOpen) {
-        isOpen = true;
-    }
-});
+export let btnClass = 'flex items-center justify-between w-full font-medium text-left text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400';
+let classBtn = classNames(btnClass, flush
+    ? 'py-5 border-b'
+    : 'focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 p-5 border hover:bg-gray-100 dark:hover:bg-gray-800');
+export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
 const handleToggle = (id) => {
     isOpen = !isOpen;
 };
 let buttonClass;
 $: if (color && isOpen) {
-    buttonClass = btnClass + colorClass;
+    buttonClass = classBtn + colorClass;
 }
 else {
-    buttonClass = btnClass;
+    buttonClass = classBtn;
 }
 </script>
 
@@ -42,15 +33,43 @@ else {
 	>
 		<slot name="header" />
 		{#if isOpen}
-			<svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />
+			{#if $$slots.arrowup}
+				<slot name="arrowup" />
+			{:else}
+				<svg
+					data-accordion-icon
+					class="w-6 h-6 rotate-180 shrink-0"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						fill-rule="evenodd"
+						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			{/if}
+		{:else if $$slots.arrowdown}
+			<slot name="arrowdown" />
 		{:else}
-			<svelte:component this={icons.down} size={iconSize} class="mr-2 {iconClass}" />
+			<svg
+				data-accordion-icon
+				class="w-6 h-6 shrink-0"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/></svg
+			>
 		{/if}
 	</button>
 </h2>
 {#if isOpen}
 	<div transition:slide={{ duration: 500 }}>
-		<div class={slotClass}>
+		<div class={classSlot}>
 			<slot name="body" />
 		</div>
 	</div>

package/accordions/AccordionItem.svelte.d.ts

@@ -1,15 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AccordionIconType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        flush?: boolean;
         id?: string;
         slotClass?: string;
         isOpen?: boolean;
         color?: boolean;
-        icons?: AccordionIconType;
-        iconSize?: number;
-        iconClass?: string;
         btnClass?: string;
         colorClass?: string;
     };
@@ -18,6 +15,8 @@ declare const __propDef: {
     };
     slots: {
         header: {};
+        arrowup: {};
+        arrowdown: {};
         body: {};
     };
 };

package/dropdowns/DropdownItem.svelte

@@ -10,7 +10,7 @@ const colors = {
 <li
 	{...$$restProps}
 	class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
-	on:click|stopPropagation
+	on:click
 	on:change
 	on:keydown
 	on:keyup

package/icons/Envelope.svelte

@@ -0,0 +1,37 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M21.75 6.75V17.25C21.75 18.4926 20.7426 19.5 19.5 19.5H4.5C3.25736 19.5 2.25 18.4926 2.25 17.25V6.75M21.75 6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75M21.75 6.75V6.99271C21.75 7.77405 21.3447 8.49945 20.6792 8.90894L13.1792 13.5243C12.4561 13.9694 11.5439 13.9694 10.8208 13.5243L3.32078 8.90894C2.65535 8.49945 2.25 7.77405 2.25 6.99271V6.75" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path d="M1.5 8.6691V17.25C1.5 18.9069 2.84315 20.25 4.5 20.25H19.5C21.1569 20.25 22.5 18.9069 22.5 17.25V8.6691L13.5723 14.1631C12.6081 14.7564 11.3919 14.7564 10.4277 14.1631L1.5 8.6691Z" fill="${color}"/> <path d="M22.5 6.90783V6.75C22.5 5.09315 21.1569 3.75 19.5 3.75H4.5C2.84315 3.75 1.5 5.09315 1.5 6.75V6.90783L11.2139 12.8856C11.696 13.1823 12.304 13.1823 12.7861 12.8856L22.5 6.90783Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'envelope';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click
+>
+	{@html svgpath}
+</svg>

package/icons/Envelope.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type EnvelopeProps = typeof __propDef.props;
+export declare type EnvelopeEvents = typeof __propDef.events;
+export declare type EnvelopeSlots = typeof __propDef.slots;
+export default class Envelope extends SvelteComponentTyped<EnvelopeProps, EnvelopeEvents, EnvelopeSlots> {
+}
+export {};

package/icons/Home.svelte

@@ -0,0 +1,37 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M2.25 11.9998L11.2045 3.04533C11.6438 2.60599 12.3562 2.60599 12.7955 3.04532L21.75 11.9998M4.5 9.74983V19.8748C4.5 20.4961 5.00368 20.9998 5.625 20.9998H9.75V16.1248C9.75 15.5035 10.2537 14.9998 10.875 14.9998H13.125C13.7463 14.9998 14.25 15.5035 14.25 16.1248V20.9998H18.375C18.9963 20.9998 19.5 20.4962 19.5 19.8748V9.74983M8.25 20.9998H16.5" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path d="M11.4697 3.84076C11.7626 3.54787 12.2374 3.54787 12.5303 3.84076L21.2197 12.5301C21.5126 12.823 21.9874 12.823 22.2803 12.5301C22.5732 12.2372 22.5732 11.7623 22.2803 11.4694L13.591 2.7801C12.7123 1.90142 11.2877 1.90142 10.409 2.7801L1.71967 11.4694C1.42678 11.7623 1.42678 12.2372 1.71967 12.5301C2.01256 12.823 2.48744 12.823 2.78033 12.5301L11.4697 3.84076Z" fill="${color}"/> <path d="M12 5.43176L20.159 13.5908C20.1887 13.6205 20.2191 13.6492 20.25 13.6769V19.8748C20.25 20.9103 19.4105 21.7498 18.375 21.7498H15C14.5858 21.7498 14.25 21.414 14.25 20.9998V16.4998C14.25 16.0856 13.9142 15.7498 13.5 15.7498H10.5C10.0858 15.7498 9.75 16.0856 9.75 16.4998V20.9998C9.75 21.414 9.41421 21.7498 9 21.7498H5.625C4.58947 21.7498 3.75 20.9103 3.75 19.8748V13.6769C3.78093 13.6492 3.81127 13.6205 3.84099 13.5908L12 5.43176Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'home';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click
+>
+	{@html svgpath}
+</svg>

package/icons/Home.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type HomeProps = typeof __propDef.props;
+export declare type HomeEvents = typeof __propDef.events;
+export declare type HomeSlots = typeof __propDef.slots;
+export default class Home extends SvelteComponentTyped<HomeProps, HomeEvents, HomeSlots> {
+}
+export {};

package/icons/QrCode.svelte

@@ -0,0 +1,37 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M3.75 4.875C3.75 4.25368 4.25368 3.75 4.875 3.75H9.375C9.99632 3.75 10.5 4.25368 10.5 4.875V9.375C10.5 9.99632 9.99632 10.5 9.375 10.5H4.875C4.25368 10.5 3.75 9.99632 3.75 9.375V4.875Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.75 14.625C3.75 14.0037 4.25368 13.5 4.875 13.5H9.375C9.99632 13.5 10.5 14.0037 10.5 14.625V19.125C10.5 19.7463 9.99632 20.25 9.375 20.25H4.875C4.25368 20.25 3.75 19.7463 3.75 19.125V14.625Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 4.875C13.5 4.25368 14.0037 3.75 14.625 3.75H19.125C19.7463 3.75 20.25 4.25368 20.25 4.875V9.375C20.25 9.99632 19.7463 10.5 19.125 10.5H14.625C14.0037 10.5 13.5 9.99632 13.5 9.375V4.875Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.75 6.75H7.5V7.5H6.75V6.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.75 16.5H7.5V17.25H6.75V16.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.5 6.75H17.25V7.5H16.5V6.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 13.5H14.25V14.25H13.5V13.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 19.5H14.25V20.25H13.5V19.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.5 13.5H20.25V14.25H19.5V13.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.5 19.5H20.25V20.25H19.5V19.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.5 16.5H17.25V17.25H16.5V16.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.875C3 3.83947 3.83947 3 4.875 3H9.375C10.4105 3 11.25 3.83947 11.25 4.875V9.375C11.25 10.4105 10.4105 11.25 9.375 11.25H4.875C3.83947 11.25 3 10.4105 3 9.375V4.875ZM4.875 4.5C4.66789 4.5 4.5 4.66789 4.5 4.875V9.375C4.5 9.58211 4.66789 9.75 4.875 9.75H9.375C9.58211 9.75 9.75 9.58211 9.75 9.375V4.875C9.75 4.66789 9.58211 4.5 9.375 4.5H4.875ZM12.75 4.875C12.75 3.83947 13.5895 3 14.625 3H19.125C20.1605 3 21 3.83947 21 4.875V9.375C21 10.4105 20.1605 11.25 19.125 11.25H14.625C13.5895 11.25 12.75 10.4105 12.75 9.375V4.875ZM14.625 4.5C14.4179 4.5 14.25 4.66789 14.25 4.875V9.375C14.25 9.58211 14.4179 9.75 14.625 9.75H19.125C19.3321 9.75 19.5 9.58211 19.5 9.375V4.875C19.5 4.66789 19.3321 4.5 19.125 4.5H14.625ZM6 6.75C6 6.33579 6.33579 6 6.75 6H7.5C7.91421 6 8.25 6.33579 8.25 6.75V7.5C8.25 7.91421 7.91421 8.25 7.5 8.25H6.75C6.33579 8.25 6 7.91421 6 7.5V6.75ZM15.75 6.75C15.75 6.33579 16.0858 6 16.5 6H17.25C17.6642 6 18 6.33579 18 6.75V7.5C18 7.91421 17.6642 8.25 17.25 8.25H16.5C16.0858 8.25 15.75 7.91421 15.75 7.5V6.75ZM3 14.625C3 13.5895 3.83947 12.75 4.875 12.75H9.375C10.4105 12.75 11.25 13.5895 11.25 14.625V19.125C11.25 20.1605 10.4105 21 9.375 21H4.875C3.83947 21 3 20.1605 3 19.125V14.625ZM4.875 14.25C4.66789 14.25 4.5 14.4179 4.5 14.625V19.125C4.5 19.3321 4.66789 19.5 4.875 19.5H9.375C9.58211 19.5 9.75 19.3321 9.75 19.125V14.625C9.75 14.4179 9.58211 14.25 9.375 14.25H4.875ZM12.75 13.5C12.75 13.0858 13.0858 12.75 13.5 12.75H14.25C14.6642 12.75 15 13.0858 15 13.5V14.25C15 14.6642 14.6642 15 14.25 15H13.5C13.0858 15 12.75 14.6642 12.75 14.25V13.5ZM18.75 13.5C18.75 13.0858 19.0858 12.75 19.5 12.75H20.25C20.6642 12.75 21 13.0858 21 13.5V14.25C21 14.6642 20.6642 15 20.25 15H19.5C19.0858 15 18.75 14.6642 18.75 14.25V13.5ZM6 16.5C6 16.0858 6.33579 15.75 6.75 15.75H7.5C7.91421 15.75 8.25 16.0858 8.25 16.5V17.25C8.25 17.6642 7.91421 18 7.5 18H6.75C6.33579 18 6 17.6642 6 17.25V16.5ZM15.75 16.5C15.75 16.0858 16.0858 15.75 16.5 15.75H17.25C17.6642 15.75 18 16.0858 18 16.5V17.25C18 17.6642 17.6642 18 17.25 18H16.5C16.0858 18 15.75 17.6642 15.75 17.25V16.5ZM12.75 19.5C12.75 19.0858 13.0858 18.75 13.5 18.75H14.25C14.6642 18.75 15 19.0858 15 19.5V20.25C15 20.6642 14.6642 21 14.25 21H13.5C13.0858 21 12.75 20.6642 12.75 20.25V19.5ZM18.75 19.5C18.75 19.0858 19.0858 18.75 19.5 18.75H20.25C20.6642 18.75 21 19.0858 21 19.5V20.25C21 20.6642 20.6642 21 20.25 21H19.5C19.0858 21 18.75 20.6642 18.75 20.25V19.5Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'qr code';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click
+>
+	{@html svgpath}
+</svg>

package/icons/QrCode.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type QrCodeProps = typeof __propDef.props;
+export declare type QrCodeEvents = typeof __propDef.events;
+export declare type QrCodeSlots = typeof __propDef.slots;
+export default class QrCode extends SvelteComponentTyped<QrCodeProps, QrCodeEvents, QrCodeSlots> {
+}
+export {};

package/index.d.ts

@@ -1,5 +1,4 @@
 export { default as AccordionItem } from './accordions/AccordionItem.svelte';
-export { default as AccordionFlush } from './accordions/AccordionFlush.svelte';
 export { default as Alert } from './alerts/Alert.svelte';
 export { default as Avatar } from './avatar/Avatar.svelte';
 export { default as Badge } from './badges/Badge.svelte';
@@ -12,7 +11,6 @@ export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
 export { default as Datepicker } from './datepicker/Datepicker.svelte';
-export { default as Drawer } from './drawers/Drawer.svelte';
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
 export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
@@ -41,13 +39,16 @@ export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 export { default as CodeBracket } from './icons/CodeBracket.svelte';
+export { default as Envelope } from './icons/Envelope.svelte';
 export { default as FaceSmile } from './icons/FaceSmile.svelte';
 export { default as Figma } from './icons/Figma.svelte';
+export { default as Home } from './icons/Home.svelte';
 export { default as Map } from './icons/Map.svelte';
 export { default as MapPin } from './icons/MapPin.svelte';
 export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
 export { default as PaperClip } from './icons/PaperClip.svelte';
 export { default as Photo } from './icons/Photo.svelte';
+export { default as QrCode } from './icons/QrCode.svelte';
 export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
@@ -119,6 +120,9 @@ export { default as TimelineHorizontal } from './timelines/TimelineHorizontal.sv
 export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte';
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 export { default as Toast } from './toasts/Toast.svelte';
+export { default as Toolbar } from './toolbar/Toolbar.svelte';
+export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
+export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
 export { default as A } from './typography/A.svelte';
 export { default as Blockquote } from './typography/Blockquote.svelte';

package/index.js

@@ -1,6 +1,5 @@
 // Accordion
 export { default as AccordionItem } from './accordions/AccordionItem.svelte';
-export { default as AccordionFlush } from './accordions/AccordionFlush.svelte';
 // Alerts
 export { default as Alert } from './alerts/Alert.svelte';
 // Avatar
@@ -23,8 +22,6 @@ export { default as CarouselTransition } from './carousels/CarouselTransition.sv
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
 // Datepicker
 export { default as Datepicker } from './datepicker/Datepicker.svelte';
-// Drawer
-export { default as Drawer } from './drawers/Drawer.svelte';
 // Dropdown
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
@@ -57,13 +54,16 @@ export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 // Icons
 export { default as CodeBracket } from './icons/CodeBracket.svelte';
+export { default as Envelope } from './icons/Envelope.svelte';
 export { default as FaceSmile } from './icons/FaceSmile.svelte';
 export { default as Figma } from './icons/Figma.svelte';
+export { default as Home } from './icons/Home.svelte';
 export { default as Map } from './icons/Map.svelte';
 export { default as MapPin } from './icons/MapPin.svelte';
 export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
 export { default as PaperClip } from './icons/PaperClip.svelte';
 export { default as Photo } from './icons/Photo.svelte';
+export { default as QrCode } from './icons/QrCode.svelte';
 export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
 // Kbd
 export { default as Kbd } from './kbd/Kbd.svelte';
@@ -151,6 +151,10 @@ export { default as TimelineItemHorizontal } from './timelines/TimelineItemHoriz
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 // Toast
 export { default as Toast } from './toasts/Toast.svelte';
+// Toolbar
+export { default as Toolbar } from './toolbar/Toolbar.svelte';
+export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
+export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
 // Tooltips
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
 // Typography

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.14",
+  "version": "0.25.17",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -100,7 +100,6 @@
   "exports": {
     "./package.json": "./package.json",
     "./.DS_Store": "./.DS_Store",
-    "./accordions/AccordionFlush.svelte": "./accordions/AccordionFlush.svelte",
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
@@ -121,7 +120,6 @@
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
     "./datepicker/Calender.svelte": "./datepicker/Calender.svelte",
     "./datepicker/Datepicker.svelte": "./datepicker/Datepicker.svelte",
-    "./drawers/Drawer.svelte": "./drawers/Drawer.svelte",
     "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
     "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",
     "./dropdowns/DropdownHeader.svelte": "./dropdowns/DropdownHeader.svelte",
@@ -150,13 +148,16 @@
     "./forms/Toggle.svelte": "./forms/Toggle.svelte",
     "./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
     "./icons/CodeBracket.svelte": "./icons/CodeBracket.svelte",
+    "./icons/Envelope.svelte": "./icons/Envelope.svelte",
     "./icons/FaceSmile.svelte": "./icons/FaceSmile.svelte",
     "./icons/Figma.svelte": "./icons/Figma.svelte",
+    "./icons/Home.svelte": "./icons/Home.svelte",
     "./icons/Map.svelte": "./icons/Map.svelte",
     "./icons/MapPin.svelte": "./icons/MapPin.svelte",
     "./icons/PaperAirplane.svelte": "./icons/PaperAirplane.svelte",
     "./icons/PaperClip.svelte": "./icons/PaperClip.svelte",
     "./icons/Photo.svelte": "./icons/Photo.svelte",
+    "./icons/QrCode.svelte": "./icons/QrCode.svelte",
     "./icons/QuoteLeft.svelte": "./icons/QuoteLeft.svelte",
     ".": "./index.js",
     "./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
@@ -229,6 +230,9 @@
     "./timelines/TimelineItemHorizontal.svelte": "./timelines/TimelineItemHorizontal.svelte",
     "./timelines/TimelineItemVertical.svelte": "./timelines/TimelineItemVertical.svelte",
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
+    "./toolbar/Toolbar.svelte": "./toolbar/Toolbar.svelte",
+    "./toolbar/ToolbarButton.svelte": "./toolbar/ToolbarButton.svelte",
+    "./toolbar/ToolbarGroup.svelte": "./toolbar/ToolbarGroup.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
     "./typography/A.svelte": "./typography/A.svelte",

package/toolbar/Toolbar.svelte

@@ -0,0 +1,57 @@
+<script>import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import classNames from 'classnames';
+const separators = writable(false);
+setContext('toolbar', separators);
+export let color = 'dark';
+export let embedded = false;
+const bgColors = {
+    gray: 'bg-gray-100 dark:bg-gray-200 ',
+    red: 'bg-red-100 dark:bg-red-200',
+    yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
+    green: 'bg-green-100 dark:bg-green-200 ',
+    indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
+    purple: 'bg-purple-100 dark:bg-purple-200 ',
+    pink: 'bg-pink-100 dark:bg-pink-200 ',
+    blue: 'bg-blue-100 dark:bg-blue-200 ',
+    dark: 'bg-gray-50 dark:bg-gray-700'
+    // custom: customBgClass
+};
+const textColors = {
+    gray: 'text-gray-500 dark:text-gray-700',
+    red: 'text-red-500 dark:text-red-700',
+    yellow: 'text-yellow-500 dark:text-yellow-700',
+    green: 'text-green-500 dark:text-green-700',
+    indigo: 'text-indigo-500 dark:text-indigo-700',
+    purple: 'text-purple-500 dark:text-purple-700',
+    pink: 'text-pink-500 dark:text-pink-700',
+    blue: 'text-blue-500 dark:text-blue-700',
+    dark: 'text-gray-500 dark:text-gray-400'
+    // custom: customTextColor
+};
+let divClass;
+$: divClass = classNames('flex justify-between items-center', embedded || 'rounded-lg border border-gray-200 dark:border-gray-600 py-2 px-3', embedded || textColors[color], embedded || bgColors[color], $$props.class);
+const divideColors = {
+    gray: 'divide-gray-200 dark:divide-gray-700',
+    red: 'divide-red-200 dark:divide-red-700',
+    yellow: 'divide-yellow-200 dark:divide-yellow-700',
+    green: 'divide-green-200 dark:divide-green-700',
+    indigo: 'divide-indigo-200 dark:divide-indigo-700',
+    purple: 'divide-purple-200 dark:divide-purple-700',
+    pink: 'divide-pink-200 dark:divide-pink-700',
+    blue: 'divide-blue-200 dark:divide-blue-700',
+    dark: 'divide-gray-200 dark:divide-gray-600'
+    // custom: customTextColor
+};
+let separatorsClass;
+$: separatorsClass = classNames($separators && 'divide-gray-200 sm:divide-x', 
+//  dark:divide-gray-600'
+divideColors[color]);
+</script>
+
+<div class={divClass}>
+	<div class="flex flex-wrap items-center {separatorsClass}">
+		<slot />
+	</div>
+	<slot name="end" />
+</div>

package/toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string;
+        embedded?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        end: {};
+    };
+};
+export declare type ToolbarProps = typeof __propDef.props;
+export declare type ToolbarEvents = typeof __propDef.events;
+export declare type ToolbarSlots = typeof __propDef.slots;
+export default class Toolbar extends SvelteComponentTyped<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+}
+export {};

package/toolbar/ToolbarButton.svelte

@@ -0,0 +1,52 @@
+<script>import { getContext } from 'svelte';
+import classNames from 'classnames';
+const background = getContext('background');
+export let color = 'default';
+export let name = undefined;
+export let ariaLabel = undefined;
+export let size = 'md';
+const colors = {
+    default: 'hover:text-gray-900 hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
+    gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
+    red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
+    yellow: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300',
+    green: 'focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
+    indigo: 'focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-300',
+    purple: 'focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-300',
+    pink: 'focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-300',
+    blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300'
+};
+const sizing = {
+    xs: 'm-0.5 rounded focus:ring-1 p-0.5',
+    sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+    md: 'rounded-lg focus:ring-2 p-1.5'
+};
+let buttonClass;
+$: buttonClass = classNames('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
+    (background
+        ? 'hover:bg-gray-100 dark:hover:bg-gray-600'
+        : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
+const svgSizes = {
+    xs: 'w-3 h-3',
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5'
+};
+</script>
+
+<button on:click type="button" class={buttonClass} aria-label={ariaLabel ?? name}>
+	{#if name}<span class="sr-only">{name}</span>{/if}
+	<slot>
+		<svg
+			class={svgSizes[size]}
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	</slot>
+</button>

package/toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string;
+        name?: string;
+        ariaLabel?: string;
+        size?: 'xs' | 'sm' | 'md';
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ToolbarButtonProps = typeof __propDef.props;
+export declare type ToolbarButtonEvents = typeof __propDef.events;
+export declare type ToolbarButtonSlots = typeof __propDef.slots;
+export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
+}
+export {};

package/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,9 @@
+<script>import { getContext } from 'svelte';
+const options = getContext('toolbar');
+if (options)
+    $options = true;
+</script>
+
+<div class="flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0">
+	<slot />
+</div>

package/toolbar/ToolbarGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ToolbarGroupProps = typeof __propDef.props;
+export declare type ToolbarGroupEvents = typeof __propDef.events;
+export declare type ToolbarGroupSlots = typeof __propDef.slots;
+export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
+}
+export {};

package/utils/Popper.svelte

@@ -77,6 +77,7 @@ $: divClass = classNames('z-10', animation && `transition-opacity ${animation}`,
 	on:focusout={activeContent ? hideHandler : undefined}
 	on:mouseenter={activeContent && !clickable ? showHandler : undefined}
 	on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
+	style="position: absolute;"
 >
 	<slot />
 	{#if arrow}<div data-popper-arrow />{/if}

package/accordions/AccordionFlush.svelte

@@ -1,47 +0,0 @@
-<script>import classNames from 'classnames';
-import { slide } from 'svelte/transition';
-import { onMount } from 'svelte';
-import { ChevronDown, ChevronUp } from 'svelte-heros';
-export let id = '';
-export let btnClass = 'flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400';
-export let slotClass = 'py-5 border-b border-gray-200 dark:border-gray-700';
-export let iconSize = 24;
-export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
-export let isOpen = false;
-export let icons = {
-    up: ChevronUp,
-    down: ChevronDown
-};
-onMount(() => {
-    if (isOpen) {
-        isOpen = true;
-    }
-});
-const handleToggle = (id) => {
-    isOpen = !isOpen;
-};
-</script>
-
-<h2 aria-expanded={isOpen}>
-	<button
-		on:click={() => handleToggle(id)}
-		type="button"
-		class:rounded-t-xl={id === '1'}
-		class:border-t-0={id !== '1'}
-		class={classNames(btnClass, $$props.class)}
-	>
-		<slot name="header" />
-		{#if isOpen}
-			<svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />
-		{:else}
-			<svelte:component this={icons.down} size={iconSize} class="mr-2 {iconClass}" />
-		{/if}
-	</button>
-</h2>
-{#if isOpen}
-	<div transition:slide={{ duration: 500 }}>
-		<div class={slotClass}>
-			<slot name="body" />
-		</div>
-	</div>
-{/if}

package/accordions/AccordionFlush.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AccordionIconType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string;
-        btnClass?: string;
-        slotClass?: string;
-        iconSize?: number;
-        iconClass?: string;
-        isOpen?: boolean;
-        icons?: AccordionIconType;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        body: {};
-    };
-};
-export declare type AccordionFlushProps = typeof __propDef.props;
-export declare type AccordionFlushEvents = typeof __propDef.events;
-export declare type AccordionFlushSlots = typeof __propDef.slots;
-export default class AccordionFlush extends SvelteComponentTyped<AccordionFlushProps, AccordionFlushEvents, AccordionFlushSlots> {
-}
-export {};

package/drawers/Drawer.svelte

@@ -1,44 +0,0 @@
-<script>import classNames from 'classnames';
-import { fly, slide, blur, fade } from 'svelte/transition';
-import { clickOutside } from '../utils/clickOutside';
-let drawerOpen = false;
-export let id = 'drawer-example';
-export let divClass = 'overflow-y-auto fixed z-40 p-4 w-80 h-screen bg-white dark:bg-gray-800';
-export let transitionParams = {};
-export let transitionType = 'fly';
-function multiple(node, params) {
-    switch (transitionType) {
-        case 'slide':
-            return slide(node, params);
-        case 'blur':
-            return blur(node, params);
-        case 'fly':
-            return fly(node, params);
-        case 'fade':
-            return fade(node, params);
-    }
-}
-let toggle = () => {
-    drawerOpen = !drawerOpen;
-};
-</script>
-
-<div
-	use:clickOutside={() => {
-		if (drawerOpen) {
-			drawerOpen = false;
-		}
-	}}
->
-	{#if drawerOpen}
-		<div
-			{id}
-			{...$$restProps}
-			class={classNames(divClass, $$props.class)}
-			transition:multiple={transitionParams}
-			tabindex="-1"
-		>
-			<slot {drawerOpen} {toggle} />
-		</div>
-	{/if}
-</div>

package/drawers/Drawer.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string;
-        divClass?: string;
-        transitionParams?: drawerTransitionParamTypes;
-        transitionType?: drawerTransitionTypes;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            drawerOpen: boolean;
-            toggle: () => void;
-        };
-    };
-};
-export declare type DrawerProps = typeof __propDef.props;
-export declare type DrawerEvents = typeof __propDef.events;
-export declare type DrawerSlots = typeof __propDef.slots;
-export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
-}
-export {};