flowbite-svelte 0.19.9 → 0.19.12

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.19.12](https://github.com/themesberg/flowbite-svelte/compare/v0.19.11...v0.19.12) (2022-06-30)
+
+### [0.19.11](https://github.com/themesberg/flowbite-svelte/compare/v0.19.10...v0.19.11) (2022-06-30)
+
+
+### Features
+
+* can add own search function to TableSearch component ([514c7f7](https://github.com/themesberg/flowbite-svelte/commit/514c7f71ba0ff48637ff37051c9e453a40a56f11))
+
+### [0.19.10](https://github.com/themesberg/flowbite-svelte/compare/v0.19.9...v0.19.10) (2022-06-30)
+
+
+### Features
+
+* add on change event dispatch to select ([bda74a6](https://github.com/themesberg/flowbite-svelte/commit/bda74a619530567d06d1badc600a3f663711b179))
+* update Breadcrumb components ([b35a970](https://github.com/themesberg/flowbite-svelte/commit/b35a9701ae08f795e37c55b92d24805d02a19b96))
+
 ### [0.19.9](https://github.com/themesberg/flowbite-svelte/compare/v0.19.8...v0.19.9) (2022-06-27)
 
 ### [0.19.8](https://github.com/themesberg/flowbite-svelte/compare/v0.19.7...v0.19.8) (2022-06-27)

package/badges/Badge.svelte

@@ -1,19 +1,31 @@
 <script>import classNames from 'classnames';
-export let textSize = 'text-xs';
-export let name = 'Read more';
 export let color = 'blue';
-let badgeClass = 'font-semibold mr-2 px-2.5 py-0.5 rounded ';
+export let large = false;
+export let href;
+let badgeClass;
 const colors = {
-    gray: `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`,
-    red: `bg-red-100 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-900`,
-    green: `bg-green-100 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-900`,
-    yellow: `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-900`,
-    indigo: `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-900`,
-    purple: `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-900`,
-    pink: `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-900`,
-    blue: `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800`
+    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
+    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+    red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
+    green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900'
 };
-badgeClass += colors[color] ?? colors.blue;
+const hovers = {
+    blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
+    dark: 'hover:bg-gray-200 dark:hover:bg-gray-300',
+    red: 'hover:bg-red-200 dark:hover:bg-red-300',
+    green: 'hover:bg-green-200 dark:hover:bg-green-300',
+    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
+    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
+    purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
+    pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
+};
+$: badgeClass = classNames('inline-flex items-center mr-2 px-2.5 py-0.5 rounded', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color] ?? colors.blue, href && (hovers[color] ?? hovers.blue), $$props.class);
 </script>
 
-<span class={classNames(badgeClass, $$props.class)} {...$$restProps}>{name}</span>
+<svelte:element this={href ? 'a' : 'span'} {href} class={badgeClass} {...$$restProps}>
+	<slot />
+</svelte:element>

package/badges/Badge.svelte.d.ts

@@ -1,16 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors, Textsize } from '../types';
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        textSize?: Textsize;
-        name?: string;
         color?: Colors;
+        large?: boolean;
+        href: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type BadgeProps = typeof __propDef.props;
 export declare type BadgeEvents = typeof __propDef.events;

package/breadcrumbs/Breadcrumb.svelte

@@ -1,49 +1,10 @@
-<script>export let crumbs = [];
-export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
-export let crumbClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
-export let solid = false;
-let navClass = 'flex';
-if (solid) {
-    navClass =
-        'flex py-3 px-5 text-gray-700 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700';
-}
+<script>import classNames from 'classnames';
+export let navClass = 'flex';
+export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
 </script>
 
-<nav class={navClass} aria-label="Breadcrumb">
-	<ol class="inline-flex items-center space-x-1 md:space-x-3">
-		{#each crumbs as crumb}
-			{#if crumb.href === '/'}
-				<li class="inline-flex items-center">
-					<a href={crumb.href} class={homeClass}>
-						<svg
-							class="mr-2 w-4 h-4"
-							fill="currentColor"
-							viewBox="0 0 20 20"
-							xmlns="http://www.w3.org/2000/svg"
-							><path
-								d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
-							/></svg
-						>
-						{crumb.label}</a
-					>
-				</li>
-			{:else}
-				<li>
-					<div class="flex items-center">
-						<svg
-							class="w-6 h-6 text-gray-400"
-							fill="currentColor"
-							viewBox="0 0 20 20"
-							xmlns="http://www.w3.org/2000/svg"
-							><path
-								fill-rule="evenodd"
-								d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-								clip-rule="evenodd"
-							/></svg
-						><a href={crumb.href} class={crumbClass}>{crumb.label}</a>
-					</div>
-				</li>
-			{/if}
-		{/each}
+<nav aria-label="Breadcrumb" class={classNames(navClass, $$props.classNav)} {...$$restProps}>
+	<ol class={classNames(olClass, $$props.classOl)}>
+		<slot />
 	</ol>
 </nav>

package/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CrumbType } from '../types';
 declare const __propDef: {
     props: {
-        crumbs?: CrumbType[];
-        homeClass?: string;
-        crumbClass?: string;
-        solid?: boolean;
+        [x: string]: any;
+        navClass?: string;
+        olClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type BreadcrumbProps = typeof __propDef.props;
 export declare type BreadcrumbEvents = typeof __propDef.events;

package/breadcrumbs/BreadcrumbItem.svelte

@@ -0,0 +1,43 @@
+<script>import { ChevronRight } from 'svelte-heros';
+export let icon = null;
+export let variation = null;
+export let iconSize = 20;
+export let iconClass = 'mr-2';
+</script>
+
+<li class="group flex items-center" {...$$props}>
+	<ChevronRight aria-hidden="true" class="mx-1 h-6 w-6 text-gray-400 group-first:hidden md:mx-2" />
+	{#if $$props.href}
+		<a
+			class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+			href={$$props.href}
+		>
+			{#if icon}
+				<svelte:component
+					this={icon}
+					{variation}
+					size={iconSize}
+					aria-hidden="true"
+					class={iconClass}
+				/>
+			{/if}
+			<slot />
+		</a>
+	{:else}
+		<span
+			class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400"
+			data-testid="breadcrumb-item"
+		>
+			{#if icon}
+				<svelte:component
+					this={icon}
+					{variation}
+					size={iconSize}
+					aria-hidden="true"
+					class={iconClass}
+				/>
+			{/if}
+			<slot />
+		</span>
+	{/if}
+</li>

package/breadcrumbs/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from 'svelte';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        icon?: typeof SvelteComponent | null;
+        variation?: 'solid' | null;
+        iconSize?: number;
+        iconClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type BreadcrumbItemProps = typeof __propDef.props;
+export declare type BreadcrumbItemEvents = typeof __propDef.events;
+export declare type BreadcrumbItemSlots = typeof __propDef.slots;
+export default class BreadcrumbItem extends SvelteComponentTyped<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {
+}
+export {};

package/forms/Select.svelte

@@ -8,6 +8,6 @@ export let selectClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-s
 </script>
 
 <label for={id} class={labelClass}>{label}</label>
-<select bind:value {id} {name} class={selectClass}>
+<select bind:value {id} {name} class={selectClass} on:change>
 	<slot />
 </select>

package/forms/Select.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         selectClass?: string;
     };
     events: {
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/index.d.ts

@@ -3,9 +3,8 @@ 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';
-export { default as BadgeIcon } from './badges/BadgeIcon.svelte';
-export { default as BadgeLink } from './badges/BadgeLink.svelte';
 export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 export { default as Button } from './buttons/Button.svelte';
 export { default as ColorShadowButton } from './buttons/ColorShadowButton.svelte';
 export { default as GradientDuotoneButton } from './buttons/GradientDuotoneButton.svelte';

package/index.js

@@ -7,10 +7,9 @@ export { default as Alert } from './alerts/Alert.svelte';
 export { default as Avatar } from './avatar/Avatar.svelte';
 // Badges
 export { default as Badge } from './badges/Badge.svelte';
-export { default as BadgeIcon } from './badges/BadgeIcon.svelte';
-export { default as BadgeLink } from './badges/BadgeLink.svelte';
 // Breadcrumbs
 export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 // Buttons
 export { default as Button } from './buttons/Button.svelte';
 export { default as ColorShadowButton } from './buttons/ColorShadowButton.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.19.9",
+  "version": "0.19.12",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -98,9 +98,8 @@
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
-    "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
-    "./badges/BadgeLink.svelte": "./badges/BadgeLink.svelte",
     "./breadcrumbs/Breadcrumb.svelte": "./breadcrumbs/Breadcrumb.svelte",
+    "./breadcrumbs/BreadcrumbItem.svelte": "./breadcrumbs/BreadcrumbItem.svelte",
     "./buttongroups/ButtonGroup.svelte": "./buttongroups/ButtonGroup.svelte",
     "./buttongroups/ButtonGroupItem.svelte": "./buttongroups/ButtonGroupItem.svelte",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
@@ -209,6 +208,7 @@
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
+    "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/generateId": "./utils/generateId.js"
   },

package/tables/TableSearch.svelte

@@ -4,15 +4,9 @@ export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
 export let inputValue = '';
 export let striped = false;
 export let hoverable = false;
-export let menuItems;
-export let filteredItems = [];
 export let placeholder = 'Search';
 $: setContext('striped', striped);
 $: setContext('hoverable', hoverable);
-const handleInput = () => {
-    let result = (filteredItems = menuItems.filter((item) => item[0].toLowerCase().match(inputValue.toLowerCase())));
-    return result;
-};
 </script>
 
 <div class={divClass}>
@@ -34,7 +28,6 @@ const handleInput = () => {
 			</div>
 			<input
 				bind:value={inputValue}
-				on:input={handleInput}
 				type="text"
 				id="table-search"
 				class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 p-2.5  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"

package/tables/TableSearch.svelte.d.ts

@@ -6,8 +6,6 @@ declare const __propDef: {
         inputValue?: string;
         striped?: boolean;
         hoverable?: boolean;
-        menuItems: Array<Array<string>>;
-        filteredItems?: Array<Array<string>>;
         placeholder?: string;
     };
     events: {

package/toasts/Toast.svelte

@@ -1,65 +1,46 @@
-<script>import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import classNames from 'classnames';
+import * as transitions from 'svelte/transition';
+import CloseButton from '../utils/CloseButton.svelte';
+export let color = 'blue';
+export let simple = false;
+// Export a prop through which you can set a desired transition
+export let transition = 'fade';
+// Pass in extra transition params
+export let params = {};
 let visible = true;
-const handleHide = () => {
-    visible = !visible;
+const colors = {
+    blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
+    green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+    red: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+    gray: 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-200',
+    purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
+    indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
+    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200'
 };
-export let iconColor = 'blue';
-// Export a prop through which you can set a desired transition
-export let transitionType = 'fade';
-// Pass in params
-export let transitionParams = {};
-let iconDivClass;
-export let divClass = 'flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800';
-export let textClass = 'ml-3 text-sm font-normal';
-export let btnClass = 'ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700';
-if (iconColor === 'blue') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
-}
-else if (iconColor === 'green') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200';
-}
-else if (iconColor === 'red') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200';
-}
-else if (iconColor === 'gray') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200';
-}
-else if (iconColor === 'purple') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-purple-500 bg-purple-100 rounded-lg dark:bg-purple-800 dark:text-purple-200';
-}
-else if (iconColor === 'indigo') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-indigo-500 bg-indigo-100 rounded-lg dark:bg-indigo-800 dark:text-indigo-200';
-}
-else if (iconColor === 'yellow') {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-yellow-500 bg-yellow-100 rounded-lg dark:bg-yellow-800 dark:text-yellow-200';
-}
-else {
-    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
-}
 // have a custom transition function that returns the desired transition
-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 transitionFunc;
+$: transitionFunc = transitions[transition] ?? transitions.fade;
+let divClass;
+$: divClass = classNames('w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800', $$props.class);
+let iconClass;
+$: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 rounded-lg w-8 h-8 mr-3', colors[color]);
 </script>
 
 {#if visible}
-	<div transition:multiple={transitionParams} class={divClass} role="alert">
-		<div class={iconDivClass}>
-			<slot name="icon" />
+	<div transition:transitionFunc={params} class={divClass} role="alert">
+		<div class="flex items-center w-full">
+			{#if $$slots.icon}
+				<div class={iconClass}>
+					<slot name="icon" />
+				</div>
+			{/if}
+
+			<div class="text-sm font-normal"><slot /></div>
+
+			{#if !simple}
+				<CloseButton on:click={() => (visible = false)} />
+			{/if}
 		</div>
-		<div class={textClass}><slot name="text" /></div>
-		<button type="button" class={btnClass} on:click={handleHide} aria-label="Close">
-			<span class="sr-only">Close</span>
-			<svg class="w-5 h-5" 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>
-		</button>
+		<slot name="extra" />
 	</div>
 {/if}

package/toasts/Toast.svelte.d.ts

@@ -2,19 +2,19 @@ import { SvelteComponentTyped } from "svelte";
 import type { Colors, TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
-        iconColor?: Colors;
-        transitionType?: TransitionTypes;
-        transitionParams?: TransitionParamTypes;
-        divClass?: string;
-        textClass?: string;
-        btnClass?: string;
+        [x: string]: any;
+        color?: Colors;
+        simple?: boolean;
+        transition?: TransitionTypes;
+        params?: TransitionParamTypes;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         icon: {};
-        text: {};
+        default: {};
+        extra: {};
     };
 };
 export declare type ToastProps = typeof __propDef.props;

package/utils/CloseButton.svelte

@@ -0,0 +1,27 @@
+<script>import classNames from 'classnames';
+export let color = 'default';
+const colors = {
+    gray: 'bg-gray-100 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300',
+    red: 'bg-red-100 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300',
+    yellow: 'bg-yellow-100 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
+    green: 'bg-green-100 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300',
+    indigo: 'bg-indigo-100 text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300',
+    purple: 'bg-purple-100 text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300',
+    pink: 'bg-pink-100 text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300',
+    blue: 'bg-blue-100 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300',
+    default: 'bg-white text-gray-400 hover:text-gray-900 focus:ring-gray-300 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'
+};
+let buttonClass = '';
+$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8', colors[color] ?? colors.blue, $$props.class);
+</script>
+
+<button on:click type="button" class={buttonClass} aria-label="Close">
+	<span class="sr-only">Close</span>
+	<svg class="w-5 h-5" 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
+	>
+</button>

package/utils/CloseButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CloseButtonProps = typeof __propDef.props;
+export declare type CloseButtonEvents = typeof __propDef.events;
+export declare type CloseButtonSlots = typeof __propDef.slots;
+export default class CloseButton extends SvelteComponentTyped<CloseButtonProps, CloseButtonEvents, CloseButtonSlots> {
+}
+export {};

package/badges/BadgeIcon.svelte

@@ -1,22 +0,0 @@
-<script>import classNames from 'classnames';
-export let textSize = 'text-xs';
-export let name = 'Read more';
-export let color = 'blue';
-let badgeClass = 'font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 ';
-const colors = {
-    gray: `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`,
-    red: `bg-red-100 text-red-800 ${textSize} dark:bg-red-700 dark:text-red-300`,
-    green: `bg-green-100 text-green-800 ${textSize} dark:bg-green-700 dark:text-green-300`,
-    yellow: `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-700 dark:text-yellow-300`,
-    indigo: `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-700 dark:text-indigo-300`,
-    purple: `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-700 dark:text-purple-300`,
-    pink: `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-700 dark:text-pink-300`,
-    blue: `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-700 dark:text-blue-300`
-};
-badgeClass += colors[color] ?? colors.blue;
-</script>
-
-<span class={classNames(badgeClass, $$props.class)} {...$$restProps}>
-	<slot />
-	{name}
-</span>

package/badges/BadgeIcon.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Colors, Textsize } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        textSize?: Textsize;
-        name?: string;
-        color?: Colors;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type BadgeIconProps = typeof __propDef.props;
-export declare type BadgeIconEvents = typeof __propDef.events;
-export declare type BadgeIconSlots = typeof __propDef.slots;
-export default class BadgeIcon extends SvelteComponentTyped<BadgeIconProps, BadgeIconEvents, BadgeIconSlots> {
-}
-export {};

package/badges/BadgeLink.svelte

@@ -1,20 +0,0 @@
-<script>import classNames from 'classnames';
-export let textSize = 'text-xs';
-export let name = 'Read more';
-export let color = 'blue';
-export let href = '/';
-let badgeClass = 'font-semibold mr-2 px-2.5 py-0.5 rounded ';
-const colors = {
-    gray: `bg-gray-100 hover:bg-gray-200 text-gray-800 ${textSize} dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300`,
-    red: `bg-red-100 hover:bg-red-200 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-800 dark:hover:bg-red-300`,
-    green: `bg-green-100 hover:bg-green-200 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-800 dark:hover:bg-green-300`,
-    yellow: `bg-yellow-100 hover:bg-yellow-200 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-800 dark:hover:bg-yellow-300`,
-    indigo: `bg-indigo-100 hover:bg-indigo-200 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-800 dark:hover:bg-indigo-300`,
-    purple: `bg-purple-100 hover:bg-purple-200 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-800 dark:hover:bg-purple-300`,
-    pink: `bg-pink-100 hover:bg-pink-200 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-800 dark:hover:bg-pink-300`,
-    blue: `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`
-};
-badgeClass += colors[color] ?? colors.blue;
-</script>
-
-<a {href} class={classNames(badgeClass, $$props.class)} {...$$restProps}>{name}</a>

package/badges/BadgeLink.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Colors, Textsize } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        textSize?: Textsize;
-        name?: string;
-        color?: Colors;
-        href?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type BadgeLinkProps = typeof __propDef.props;
-export declare type BadgeLinkEvents = typeof __propDef.events;
-export declare type BadgeLinkSlots = typeof __propDef.slots;
-export default class BadgeLink extends SvelteComponentTyped<BadgeLinkProps, BadgeLinkEvents, BadgeLinkSlots> {
-}
-export {};