flowbite-svelte 0.27.3 → 0.27.5

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.27.5](https://github.com/themesberg/flowbite-svelte/compare/v0.27.4...v0.27.5) (2022-10-01)
+
+
+### Features
+
+* add fetchMarkdownPosts in utils/index ([#333](https://github.com/themesberg/flowbite-svelte/issues/333)) ([b604c0c](https://github.com/themesberg/flowbite-svelte/commit/b604c0c31c99b743817d814b3b043c42ccfaf14c))
+
+
+### Bug Fixes
+
+* accordion slots + docs ([#349](https://github.com/themesberg/flowbite-svelte/issues/349)) ([78a2542](https://github.com/themesberg/flowbite-svelte/commit/78a25427e31f61ba86ce825d9127515326448afa))
+* props using vite named import ([#347](https://github.com/themesberg/flowbite-svelte/issues/347)) ([7072e03](https://github.com/themesberg/flowbite-svelte/commit/7072e03b7ec8bac2e3d74d53f87c54dab772e159))
+* use vite to import a file as text ([#342](https://github.com/themesberg/flowbite-svelte/issues/342)) ([07ac592](https://github.com/themesberg/flowbite-svelte/commit/07ac592b0a06cda8afd71d918145693a0834b4f3))
+
+### [0.27.4](https://github.com/themesberg/flowbite-svelte/compare/v0.27.3...v0.27.4) (2022-09-26)
+
+
+### Features
+
+* toast fine tune ([f3ee6f3](https://github.com/themesberg/flowbite-svelte/commit/f3ee6f382aa3a004a8efdbed75f215b9dfe59b4e))
+
+
+### Bug Fixes
+
+* app.css restored ([e40bc80](https://github.com/themesberg/flowbite-svelte/commit/e40bc80cace759b434bc889c1d143533de032345))
+* change a to A component ([dc92c3f](https://github.com/themesberg/flowbite-svelte/commit/dc92c3f699986f6679805350f3a88effc0e2a0c8))
+* remove type CrumbType ([4269359](https://github.com/themesberg/flowbite-svelte/commit/4269359c1bddb37fea064cab4dc31b3ea30772ee))
+* toc stickiness ([#330](https://github.com/themesberg/flowbite-svelte/issues/330)) ([21a0409](https://github.com/themesberg/flowbite-svelte/commit/21a0409bd34323b2858f43952ef6de45982b262d))
+* update props and types page ([#331](https://github.com/themesberg/flowbite-svelte/issues/331)) ([0be5900](https://github.com/themesberg/flowbite-svelte/commit/0be59006c6bf79df210838b21a17d3dfd18213ac))
+
 ### [0.27.3](https://github.com/themesberg/flowbite-svelte/compare/v0.27.2...v0.27.3) (2022-09-26)
 
 

package/accordions/Accordion.svelte

@@ -0,0 +1,24 @@
+<script context="module">import { writable } from 'svelte/store';
+</script>
+
+<script>import Frame from '../utils/Frame.svelte';
+import classNames from 'classnames';
+import { setContext } from 'svelte';
+export let single = true;
+export let flush = false;
+export let activeClasses = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
+export let inactiveClasses = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
+export let defaultClass = 'text-gray-500 dark:text-gray-400';
+const ctx = {
+    flush,
+    activeClasses,
+    inactiveClasses,
+    selected: single ? writable() : undefined
+};
+setContext('ctx', ctx);
+let frameClass = classNames(defaultClass, 'divide-y divide-gray-200 dark:divide-gray-700', 'border-gray-200 dark:border-gray-700', 'rounded-t-xl', $$props.class);
+</script>
+
+<Frame class={frameClass} color="none" border={!flush}>
+  <slot />
+</Frame>

package/accordions/Accordion.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Writable } from 'svelte/store';
+export interface AccordionCtxType {
+    flush: boolean;
+    activeClasses: string;
+    inactiveClasses: string;
+    selected?: Writable<object>;
+}
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        single?: boolean | undefined;
+        flush?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+        defaultClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AccordionProps = typeof __propDef.props;
+export declare type AccordionEvents = typeof __propDef.events;
+export declare type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponentTyped<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/accordions/AccordionItem.svelte

@@ -1,76 +1,42 @@
-<script>import classNames from 'classnames';
+<script>import ChevronDown from '../utils/ChevronDown.svelte';
+import ChevronUp from '../utils/ChevronUp.svelte';
+import classNames from 'classnames';
+import { getContext, onMount } from 'svelte';
+import { writable } from 'svelte/store';
 import { slide } from 'svelte/transition';
-export let flush = false;
-export let id = '';
-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 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;
-};
+export let open = false;
+export let activeClasses = undefined;
+export let inactiveClasses = undefined;
+export let defaultClass = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl';
+const ctx = getContext('ctx') ?? {};
+// single selection
+const self = {};
+const selected = ctx.selected ?? writable();
+onMount(() => {
+    if (open)
+        $selected = self;
+    // this will trigger unsubscribe on destroy
+    return selected.subscribe((x) => (open = x === self));
+});
+const handleToggle = (e) => selected.set(open ? {} : self);
 let buttonClass;
-$: if (color && isOpen) {
-    buttonClass = classBtn + colorClass;
-}
-else {
-    buttonClass = classBtn;
-}
+$: buttonClass = classNames(defaultClass, ctx.flush ? 'py-5' : 'p-5', open && (ctx.flush ? 'text-gray-900 dark:text-white' : activeClasses || ctx.activeClasses), !open && (ctx.flush ? 'text-gray-500 dark:text-gray-400' : inactiveClasses || ctx.inactiveClasses), $$props.class);
 </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(buttonClass, $$props.class)}
-	>
-		<slot name="header" />
-		{#if isOpen}
-			{#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}
-			<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 aria-expanded={open} class="group">
+  <button on:click={handleToggle} type="button" class={buttonClass}>
+    <slot name="header" />
+    {#if open}
+      <slot name="arrowup"><ChevronUp /></slot>
+    {:else}
+      <slot name="arrowdown"><ChevronDown /></slot>
+    {/if}
+  </button>
 </h2>
-{#if isOpen}
-	<div transition:slide={{ duration: 500 }}>
-		<div class={classSlot}>
-			<slot name="body" />
-		</div>
-	</div>
+{#if open}
+  <div transition:slide={{ duration: 500 }}>
+    <div class={ctx.flush ? 'py-5' : 'p-5'}>
+      <slot />
+    </div>
+  </div>
 {/if}

package/accordions/AccordionItem.svelte.d.ts

@@ -2,13 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        flush?: boolean | undefined;
-        id?: string | undefined;
-        slotClass?: string | undefined;
-        isOpen?: boolean | undefined;
-        color?: boolean | undefined;
-        btnClass?: string | undefined;
-        colorClass?: string | undefined;
+        open?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+        defaultClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,7 +14,7 @@ declare const __propDef: {
         header: {};
         arrowup: {};
         arrowdown: {};
-        body: {};
+        default: {};
     };
 };
 export declare type AccordionItemProps = typeof __propDef.props;

package/buttongroups/ButtonGroup.svelte

@@ -1,10 +1,10 @@
 <script>import { setContext } from 'svelte';
 import classNames from 'classnames';
-export let divClass = 'inline-flex rounded-lg shadow-sm w-fit';
-setContext('group', true);
-setContext('background', true);
+export let size = 'md';
+export let divClass = 'inline-flex rounded-lg shadow-sm';
+setContext('group', { size });
 </script>
 
 <div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">
-	<slot />
+  <slot />
 </div>

package/buttongroups/ButtonGroup.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        size?: SizeType | undefined;
         divClass?: string | undefined;
     };
     events: {

package/buttons/Button.svelte

@@ -10,7 +10,6 @@ export let btnClass = undefined;
 export let type = 'button';
 export let color = group ? (outline ? 'dark' : 'alternative') : 'blue';
 export let shadow = null;
-const background = getContext('background');
 const colorClasses = {
     blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
     dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
@@ -80,11 +79,11 @@ $: buttonClass = btnClass
     : classNames('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', !group || color === 'alternative' || (outline && color === 'dark') || 'focus:outline-none', outline && gradient
         ? 'p-0.5'
         : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
-        (background
+        (group
             ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
             : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), outline &&
         color === 'dark' &&
-        (background
+        (group
             ? 'dark:text-white dark:border-white'
             : 'dark:text-gray-400 dark:border-gray-700'), hasBorder() && group && 'border-l-0 first:border-l', rounded(false), shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 let gradientOutlineClass;

package/forms/Input.svelte

@@ -1,50 +1,80 @@
-<script>import classNames from 'classnames';
+<script context="module">export function clampSize(s) {
+    return s && s === 'xs' ? 'sm' : s === 'xl' ? 'lg' : s;
+}
+</script>
+
+<script>import Wrapper from '../utils/Wrapper.svelte';
+import classNames from 'classnames';
 import { getContext } from 'svelte';
 export let type = 'text';
 export let value = '';
-export let size = 'md';
-export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
+export let size = undefined;
+export let defaultClass = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
 export let color = 'base';
+const borderClasses = {
+    base: 'border-gray-300 dark:border-gray-600',
+    tinted: 'border-gray-300 dark:border-gray-500',
+    green: 'border-green-500 dark:border-green-400',
+    red: 'border-red-500 dark:border-red-400'
+};
+const ringClasses = {
+    base: 'focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+    green: 'focus:ring-green-500 focus:border-green-500 dark:focus:border-green-500 dark:focus:ring-green-500',
+    red: 'focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
+};
 const colorClasses = {
-    base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
-    green: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
-    red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
+    base: 'bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400',
+    tinted: 'bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400',
+    green: 'bg-green-50 text-green-900 placeholder-green-700 dark:bg-gray-700',
+    red: 'bg-red-50 text-red-900 placeholder-red-700 dark:bg-gray-700'
 };
 // tinted if put in component having its own background
 let background = getContext('background');
+let group = getContext('group');
 // you need to this to avoid 2-way binding
-const setType = (node) => {
-    node.type = type;
+const setType = (node, _type) => {
+    node.type = _type;
+    return {
+        update(_type) {
+            node.type = _type;
+        }
+    };
 };
+const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
+const leftPadding = { sm: 'pl-9', md: 'pl-10', lg: 'pl-11' };
+const rightPadding = { sm: 'pr-9', md: 'pr-10', lg: 'pr-11' };
+const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-4' };
+$: _size = size || clampSize(group?.size) || 'md';
+let inputClass;
+$: {
+    const _color = color === 'base' && background ? 'tinted' : color;
+    inputClass = classNames(defaultClass, $$slots.left && leftPadding[_size], $$slots.right && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], inputPadding[_size], textSizes[_size], group || 'rounded-lg', group && 'first:rounded-l-lg last:rounded-r-lg', group && 'border-l-0 first:border-l last:border-r', $$props.class);
+}
+let floatClass = 'flex absolute inset-y-0 left-0 items-center pointer-events-none text-gray-500 dark:text-gray-400';
 </script>
 
-<input
-  {...$$restProps}
-  bind:value
-  on:blur
-  on:change
-  on:click
-  on:focus
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:paste
-  on:input
-  use:setType
-  class={classNames(
-    inputClass,
-    colorClasses[color],
-    color === 'base' &&
-      (background
-        ? 'dark:bg-gray-600 dark:border-gray-500'
-        : 'dark:bg-gray-700 dark:border-gray-600'),
-    {
-      'p-2 sm:text-xs': size === 'sm',
-      'p-2.5 text-sm': size === 'md',
-      'sm:text-md p-4': size === 'lg'
-    },
-    $$props.class
-  )} />
+<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
+  {#if $$slots.left}
+    <div class="{floatClass} pl-3"><slot name="left" /></div>
+  {/if}
+  <input
+    {...$$restProps}
+    bind:value
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:paste
+    on:input
+    use:setType={type}
+    class={inputClass} />
+  {#if $$slots.right}
+    <div class="{floatClass} pr-3"><slot name="right" /></div>
+  {/if}
+</Wrapper>

package/forms/Input.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SizeType, FormSizeType } from '../types';
+export declare function clampSize(s: SizeType): "sm" | "md" | "lg";
 import type { InputType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         type?: InputType | undefined;
         value?: string | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        inputClass?: string | undefined;
+        size?: FormSizeType | undefined;
+        defaultClass?: string | undefined;
         color?: "green" | "red" | "base" | undefined;
     };
     events: {
@@ -25,7 +27,10 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        left: {};
+        right: {};
+    };
 };
 export declare type InputProps = typeof __propDef.props;
 export declare type InputEvents = typeof __propDef.events;

package/forms/InputAddon.svelte

@@ -0,0 +1,29 @@
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+import { clampSize } from './Input.svelte';
+export let size = undefined;
+// tinted if put in component having its own background
+let background = getContext('background');
+let group = getContext('group');
+const borderClasses = {
+    base: 'border-gray-300 dark:border-gray-600',
+    tinted: 'border-gray-300 dark:border-gray-500'
+};
+const darkBgClasses = {
+    base: 'dark:bg-gray-600 dark:text-gray-400',
+    tinted: 'dark:bg-gray-500 dark:text-gray-300'
+};
+const divider = {
+    base: 'dark:border-r-gray-700 dark:last:border-r-gray-600',
+    tinted: 'dark:border-r-gray-600 dark:last:border-r-gray-500'
+};
+const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
+const prefixPadding = { sm: 'px-2', md: 'px-3', lg: 'px-4' };
+// size: explicit, inherited, default
+$: _size = size || clampSize(group?.size) || 'md';
+$: divClass = classNames(textSizes[_size], prefixPadding[_size], background ? borderClasses['tinted'] : borderClasses['base'], 'text-gray-500 bg-gray-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, 'inline-flex items-center border-t border-b first:border-l border-r', 'first:rounded-l-lg last:rounded-r-lg', $$props.class);
+</script>
+
+<div {...$$restProps} class={divClass}>
+  <slot />
+</div>

package/forms/InputAddon.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: 'sm' | 'md' | 'lg' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type InputAddonProps = typeof __propDef.props;
+export declare type InputAddonEvents = typeof __propDef.events;
+export declare type InputAddonSlots = typeof __propDef.slots;
+export default class InputAddon extends SvelteComponentTyped<InputAddonProps, InputAddonEvents, InputAddonSlots> {
+}
+export {};

package/forms/Radio.svelte

@@ -1,29 +1,16 @@
-<script context="module">
-	// this part is shared between Radio and Checkbox
-	import classNames from 'classnames';
-
-	const colorClasses = {
-		red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
-		green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
-		purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
-		teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
-		yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
-		orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
-		blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
-	};
-
-	export const labelClass = (inline, extraClass) =>
-		classNames(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
-
-	export const inputClass = (custom, color, rounded, tinted, extraClass) =>
-		classNames(
-			'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2',
-			tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600',
-			custom && 'sr-only peer',
-			rounded && 'rounded',
-			colorClasses[color],
-			extraClass
-		);
+<script context="module">// this part is shared between Radio and Checkbox
+import classNames from 'classnames';
+const colorClasses = {
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
+    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
+    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+};
+export const labelClass = (inline, extraClass) => classNames(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
+export const inputClass = (custom, color, rounded, tinted, extraClass) => classNames('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', extraClass === true && 'mr-2', tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
 </script>
 
 <script>import { getContext } from 'svelte';
@@ -38,21 +25,21 @@ let background = getContext('background');
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-	<input
-		type="radio"
-		bind:group
-		on:blur
-		on:change
-		on:click
-		on:focus
-		on:keydown
-		on:keypress
-		on:keyup
-		on:mouseenter
-		on:mouseleave
-		on:mouseover
-		on:paste
-		{value}
-		{...$$restProps}
-		class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} /><slot />
+  <input
+    type="radio"
+    bind:group
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:paste
+    {value}
+    {...$$restProps}
+    class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} /><slot />
 </Label>

package/forms/Radio.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-export declare const labelClass: (inline: any, extraClass: any) => string;
-export declare const inputClass: (custom: any, color: any, rounded: any, tinted: any, extraClass: any) => string;
+export declare const labelClass: (inline: boolean, extraClass: string) => string;
+export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string | boolean) => string;
 import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {

package/forms/Search.svelte

@@ -1,46 +1,54 @@
-<script>export let id = '';
-export let labelClass = 'mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300';
-export let inputClass = 'block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
-export let btnClass = 'text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+<script>import Wrapper from '../utils/Wrapper.svelte';
+import Input from './Input.svelte';
+export let size = 'lg';
 export let placeholder = 'Search';
+const sizes = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+};
 </script>
 
-<form on:submit>
-	<label for={id} class={labelClass}>Search</label>
-	<div class="relative">
-		<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-			<svg
-				class="w-5 h-5 text-gray-500 dark:text-gray-400"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-				/></svg
-			>
-		</div>
-		<input
-			{...$$restProps}
-			on:blur
-			on:change
-			on:click
-			on:focus
-			on:keydown
-			on:keypress
-			on:keyup
-			on:mouseenter
-			on:mouseleave
-			on:mouseover
-			on:paste
-			type="search"
-			{id}
-			class={inputClass}
-			{placeholder}
-		/>
-		<button type="submit" class={btnClass}>Search</button>
-	</div>
-</form>
+<Wrapper class="relative w-full" show={$$slots.default}>
+  <Input
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:paste
+    type="search"
+    {placeholder}
+    {size}
+    {...$$restProps}
+    class={$$props.class}>
+    <svg
+      slot="left"
+      class={sizes[size]}
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clip-rule="evenodd" />
+    </svg>
+    <!-- We can use it here. See below. This will trigger right padding
+      <slot slot="right" />
+    -->
+  </Input>
+  <!-- This slot should be within Input as a slot='right'
+    Svelete has an issue with forwarded slots and even empty slot here will appear as existing slot in Input.
+    Due to that we need the below slot and Wrapper around
+  -->
+  {#if $$slots.default}
+    <div class="flex absolute inset-y-0 right-0 items-center pr-3 text-gray-500 dark:text-gray-400">
+      <slot />
+    </div>
+  {/if}
+</Wrapper>

package/forms/Search.svelte.d.ts

@@ -1,15 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { FormSizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string | undefined;
-        labelClass?: string | undefined;
-        inputClass?: string | undefined;
-        btnClass?: string | undefined;
+        size?: FormSizeType | undefined;
         placeholder?: string | undefined;
     };
     events: {
-        submit: SubmitEvent;
         blur: FocusEvent;
         change: Event;
         click: MouseEvent;
@@ -24,7 +21,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type SearchProps = typeof __propDef.props;
 export declare type SearchEvents = typeof __propDef.events;

package/forms/SimpleSearch.svelte

@@ -1,65 +1,20 @@
-<script>import { getContext } from 'svelte';
-export let id = '';
-export let labelClass = 'sr-only';
-export let iconClass = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-export let iconDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
-export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
-export let btnClass = 'p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-export let placeholder = 'Search';
-// tainted if put in component having its own background
-let background = getContext('background');
+<script>import Search from './Search.svelte';
+import Button from '../buttons/Button.svelte';
 </script>
 
-<form class="flex items-center" on:submit>
-	<label for={id} class={labelClass}>Search</label>
-	<div class="relative w-full">
-		<div class={iconDivClass}>
-			<svg
-				class={iconClass}
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		</div>
-		<input
-			on:blur
-			on:change
-			on:click
-			on:focus
-			on:keydown
-			on:keypress
-			on:keyup
-			on:mouseenter
-			on:mouseleave
-			on:mouseover
-			on:paste
-			{...$$restProps}
-			type="text"
-			{id}
-			class="{background
-				? 'dark:bg-gray-600 dark:border-gray-500'
-				: ' dark:bg-gray-700 dark:border-gray-600'} {inputClass}"
-			{placeholder}
-		/>
-	</div>
-	<button type="submit" class={btnClass}
-		><svg
-			class="w-5 h-5"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-			/></svg
-		></button
-	>
+<form class="flex gap-2" on:submit>
+  <Search size="md" {...$$restProps} />
+  <Button class="!p-2.5">
+    <svg
+      class="w-5 h-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+  </Button>
 </form>

package/forms/SimpleSearch.svelte.d.ts

@@ -2,27 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string | undefined;
-        labelClass?: string | undefined;
-        iconClass?: string | undefined;
-        iconDivClass?: string | undefined;
-        inputClass?: string | undefined;
-        btnClass?: string | undefined;
-        placeholder?: string | undefined;
     };
     events: {
         submit: SubmitEvent;
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-        paste: ClipboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Accordion } from './accordions/Accordion.svelte';
 export { default as AccordionItem } from './accordions/AccordionItem.svelte';
 export { default as Alert } from './alerts/Alert.svelte';
 export { default as Avatar } from './avatar/Avatar.svelte';
@@ -29,6 +30,7 @@ export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte
 export { default as Helper } from './forms/Helper.svelte';
 export { default as Iconinput } from './forms/Iconinput.svelte';
 export { default as Input } from './forms/Input.svelte';
+export { default as InputAddon } from './forms/InputAddon.svelte';
 export { default as Label } from './forms/Label.svelte';
 export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';

package/index.js

@@ -1,4 +1,5 @@
 // Accordion
+export { default as Accordion } from './accordions/Accordion.svelte';
 export { default as AccordionItem } from './accordions/AccordionItem.svelte';
 // Alerts
 export { default as Alert } from './alerts/Alert.svelte';
@@ -44,6 +45,7 @@ export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte
 export { default as Helper } from './forms/Helper.svelte';
 export { default as Iconinput } from './forms/Iconinput.svelte';
 export { default as Input } from './forms/Input.svelte';
+export { default as InputAddon } from './forms/InputAddon.svelte';
 export { default as Label } from './forms/Label.svelte';
 export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';

package/modals/Modal.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Size } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
         title?: string | undefined;
-        size?: Size | undefined;
+        size?: any;
         placement?: "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | undefined;
         autoclose?: boolean | undefined;
         permanent?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.27.3",
+  "version": "0.27.5",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -101,6 +101,7 @@
   ],
   "exports": {
     "./package.json": "./package.json",
+    "./accordions/Accordion.svelte": "./accordions/Accordion.svelte",
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
@@ -139,6 +140,7 @@
     "./forms/Helper.svelte": "./forms/Helper.svelte",
     "./forms/Iconinput.svelte": "./forms/Iconinput.svelte",
     "./forms/Input.svelte": "./forms/Input.svelte",
+    "./forms/InputAddon.svelte": "./forms/InputAddon.svelte",
     "./forms/Label.svelte": "./forms/Label.svelte",
     "./forms/Radio.svelte": "./forms/Radio.svelte",
     "./forms/RadioInline.svelte": "./forms/RadioInline.svelte",

package/toasts/Toast.svelte

@@ -4,21 +4,23 @@ import CloseButton from '../utils/CloseButton.svelte';
 import { fade } from 'svelte/transition';
 export let color = 'blue';
 export let simple = false;
-// Absolute position
-export let position = undefined; // default not set
-export let visible = true;
+export let position = 'none'; // default not set
+export let open = true;
 export let divClass = 'w-full max-w-xs p-4';
-$: classDiv = classNames(divClass, {
-    'absolute top-5 left-5': position == 'tl',
-    'absolute top-5 right-5': position == 'tr',
-    'absolute bottom-5 left-5': position == 'bl',
-    'absolute bottom-5 right-5': position == 'br'
-}, $$props.class);
+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: ''
+};
+let classDiv;
+$: classDiv = classNames(divClass, positions[position], $$props.class);
 let iconClass;
 $: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3');
 </script>
 
-{#if visible}
+{#if open}
   <Frame rounded border transition={fade} {...$$restProps} class={classDiv} role="alert">
     <div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
       {#if $$slots.icon}
@@ -30,7 +32,7 @@ $: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0
         <slot name="extra" />
       </div>
       {#if !simple}
-        <CloseButton on:click={() => (visible = false)} />
+        <CloseButton on:click={() => (open = false)} />
       {/if}
     </div>
   </Frame>

package/toasts/Toast.svelte.d.ts

@@ -5,8 +5,8 @@ declare const __propDef: {
         [x: string]: any;
         color?: Colors | undefined;
         simple?: boolean | undefined;
-        position?: "br" | "tr" | "tl" | "bl" | undefined;
-        visible?: boolean | undefined;
+        position?: "none" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+        open?: boolean | undefined;
         divClass?: string | undefined;
     };
     events: {

package/tooltips/Tooltip.svelte

@@ -10,7 +10,6 @@ const styles = {
 };
 let toolTipClass;
 $: {
-    $$restProps.color || (style = 'custom');
     if ($$restProps.color)
         style = 'custom';
     else

package/types.d.ts

@@ -1,8 +1,4 @@
 import type { SvelteComponent } from 'svelte';
-export declare type AccordionIconType = {
-    up: typeof SvelteComponent;
-    down: typeof SvelteComponent;
-};
 export interface ActivityType {
     title: HTMLElement | string;
     date: Date | string;
@@ -18,34 +14,9 @@ export interface AuthFieldType {
     placeholder?: string;
 }
 export declare type AuthFunctionType = () => Promise<void>;
-export interface AvatarType {
-    src?: string;
-    alt?: string;
-    size?: number;
-    border?: boolean;
-    round?: boolean;
-    header?: string;
-    text?: string;
-}
-export interface ButtonGroupType {
-    name: string;
-    href?: string;
-    rel?: string;
-    icon?: typeof SvelteComponent;
-    iconSize?: number;
-    iconClass?: string;
-}
 export declare type ButtonType = 'button' | 'submit' | 'reset';
 export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
 export declare type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
-export declare type CardButtonType = {
-    textSize?: Textsize;
-    name: string;
-    type?: Buttontypes;
-    href?: string;
-    rel?: string;
-    rounded?: boolean;
-};
 export declare type CarouselIconType = {
     next: typeof SvelteComponent;
     prev: typeof SvelteComponent;
@@ -58,10 +29,6 @@ export interface CheckboxType {
     helper?: string;
 }
 export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom';
-export declare type CrumbType = {
-    label: string;
-    href: string;
-};
 export interface DotType {
     top?: boolean;
     color?: string;
@@ -76,7 +43,6 @@ export interface drawerTransitionParamTypes {
     y?: number;
 }
 export declare type drawerTransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur' | undefined;
-export declare type DropdownColorType = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
 export interface DropdownType {
     name: string;
     href: string;
@@ -110,7 +76,7 @@ export declare type ImgType = {
     src: string;
     alt?: string;
 };
-export declare type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export declare type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
 export interface InteractiveTabType {
     name: string;
     id: number;
@@ -152,7 +118,8 @@ export declare const sm = "sm";
 export declare const md = "md";
 export declare const lg = "lg";
 export declare const xl = "xl";
-export declare type Size = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+export declare type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+export declare type FormSizeType = typeof sm | typeof md | typeof lg;
 export interface PillTabType {
     name: string;
     selected: boolean;