flowbite-svelte 0.37.4 → 0.38.1

package/dist/dropdowns/DropdownDivider.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divClass = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
 </script>
 
-<div {...$$restProps} class={classNames(divClass, $$props.class)} />
+<div {...$$restProps} class={twMerge(divClass, $$props.class)} />
 
 <!--
   @component

package/dist/dropdowns/DropdownHeader.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import DropdownDivider from './DropdownDivider.svelte';
 export let divClass = 'py-2 px-4 text-gray-700 dark:text-white';
 export let divider = true;
 </script>
 
-<div {...$$restProps} class={classNames(divClass, $$props.class)}>
+<div {...$$restProps} class={twMerge(divClass, $$props.class)}>
   <slot />
 </div>
 {#if divider}

package/dist/dropdowns/DropdownItem.svelte

@@ -1,9 +1,9 @@
 <script>import Wrapper from '../utils/Wrapper.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let defaultClass = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
 export let href = undefined;
 let liClass;
-$: liClass = classNames(defaultClass, href ? 'block' : 'w-full text-left', $$props.class);
+$: liClass = twMerge(defaultClass, href ? 'block' : 'w-full text-left', $$props.class);
 let wrap = true;
 function init(node) {
     wrap = node.parentElement?.tagName === 'UL';

package/dist/footer/Footer.svelte

@@ -1,22 +1,26 @@
-<script>import classNames from 'classnames';
-export let customClass = '';
+<script>import { twMerge } from 'tailwind-merge';
 export let footerType = 'default';
-// using classNames dynamic class names, https://github.com/JedWatson/classnames#dynamic-class-names-with-es2015
+let styles = '';
+switch (footerType) {
+    case 'sitemap':
+        styles = 'bg-gray-800';
+        break;
+    case 'socialmedia':
+        styles = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
+        break;
+    case 'logo':
+        styles = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
+        break;
+    case 'default':
+        styles = 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
+        break;
+}
+let footerClass = twMerge([styles, $$props.class]);
+console.log(footerClass);
 </script>
-
 <footer
   {...$$restProps}
-  class={classNames(
-    {
-      'bg-gray-800': footerType === 'sitemap',
-      'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
-      'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
-      'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
-        footerType === 'default',
-      [`${customClass}`]: footerType === 'custom'
-    },
-    $$props.class
-  )}>
+  class={footerClass}>
   <slot />
 </footer>
 

package/dist/footer/Footer.svelte.d.ts

@@ -2,8 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        customClass?: string | undefined;
-        footerType?: "default" | "custom" | "sitemap" | "logo" | "socialmedia" | undefined;
+        footerType?: "default" | "sitemap" | "logo" | "socialmedia" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/footer/Footer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4BD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqCD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/footer/FooterBrand.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let aClass = 'flex items-center';
 export let spanClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
 export let imgClass = 'mr-3 h-8';
@@ -10,7 +10,7 @@ export let target = undefined;
 </script>
 
 {#if href}
-  <a {...$$restProps} {href} {target} class={classNames(aClass, $$props.class)}>
+  <a {...$$restProps} {href} {target} class={twMerge(aClass, $$props.class)}>
     <img {src} class={imgClass} {alt} />
     <span class={spanClass}>{name}</span>
     <slot />

package/dist/footer/FooterCopyright.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let spanClass = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
 export let aClass = 'hover:underline';
 export let year = new Date().getFullYear();
@@ -8,7 +8,7 @@ export let target = undefined;
 export let copyrightMessage = 'All Rights Reserved.';
 </script>
 
-<span class={classNames(spanClass, $$props.class)}>
+<span class={twMerge(spanClass, $$props.class)}>
   &copy; {year}
   {#if href}
     <a {...$$restProps} {href} {target} class={aClass}>

package/dist/footer/FooterIcon.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let href = '';
 export let ariaLabel = '';
 export let aClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
@@ -6,7 +6,7 @@ export let target = undefined;
 </script>
 
 {#if href}
-  <a {...$$restProps} {href} {target} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
+  <a {...$$restProps} {href} {target} aria-label={ariaLabel} class={twMerge(aClass, $$props.class)}>
     <slot />
   </a>
 {:else}

package/dist/footer/FooterLink.svelte

@@ -1,11 +1,11 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let liClass = 'mr-4 last:mr-0 md:mr-6';
 export let aClass = 'hover:underline';
 export let href = '';
 export let target = undefined;
 </script>
 
-<li class={classNames(liClass, $$props.class)}>
+<li class={twMerge(liClass, $$props.class)}>
   <a {...$$restProps} {href} class={aClass} {target}>
     <slot />
   </a>

package/dist/footer/FooterLinkGroup.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let ulClass = 'text-gray-600 dark:text-gray-400';
 </script>
 
-<ul class={classNames(ulClass, $$props.class)}>
+<ul class={twMerge(ulClass, $$props.class)}>
   <slot />
 </ul>
 

package/dist/forms/Checkbox.svelte

@@ -1,4 +1,5 @@
-<script>import { getContext } from 'svelte';
+<script>import { twMerge } from 'tailwind-merge';
+import { getContext } from 'svelte';
 import { labelClass, inputClass } from './Radio.svelte';
 import Label from './Label.svelte';
 // properties forwarding
@@ -8,6 +9,7 @@ export let inline = false;
 export let group = [];
 export let value = 'on';
 export let checked = undefined;
+export let spacing = 'mr-2';
 // tinted if put in component having its own background
 let background = getContext('background');
 // react on external group changes
@@ -62,7 +64,9 @@ function onChange() {
     on:change
     {value}
     {...$$restProps}
-    class={inputClass(custom, color, true, background, $$slots.default || $$props.class)} /><slot />
+    class={twMerge(
+      spacing,
+      inputClass(custom, color, true, background, $$slots.default || $$props.class))} /><slot />
 </Label>
 
 <!--

package/dist/forms/Checkbox.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         group?: (string | number)[] | undefined;
         value?: string | number | undefined;
         checked?: boolean | undefined;
+        spacing?: string | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/forms/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Checkbox.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA+D9C,QAAA,MAAM,SAAS;;;;;;;;kBADkO,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;CACtL,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Checkbox.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAmE9C,QAAA,MAAM,SAAS;;;;;;;;kBADqP,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzM,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/forms/Dropzone.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let value = '';
 export let files = undefined;
 export let defaultClass = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
@@ -12,7 +12,7 @@ function keydown(ev) {
 </script>
 
 <button
-  class={classNames(defaultClass, $$props.class)}
+  class={twMerge(defaultClass, $$props.class)}
   on:keydown={keydown}
   on:focus
   on:blur

package/dist/forms/Fileupload.svelte

@@ -1,11 +1,11 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import Input from './Input.svelte';
 export let value = '';
 export let files = undefined;
 export let inputClass = 'border !p-0 dark:text-gray-400';
 </script>
 
-<Input {...$$restProps} class={classNames(inputClass, $$props.class)} let:props>
+<Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
   <input
     type="file"
     on:change

package/dist/forms/FloatingLabelInput.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import generateId from '../utils/generateId.js';
 export let id = generateId();
 export let style = 'standard';
@@ -51,12 +51,12 @@ const labelClasses = {
     standard: 'absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6'
 };
 const inputColorClasses = {
-    base: 'border-gray-300 dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+    base: 'border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600',
     green: 'border-green-600 dark:border-green-500 dark:focus:border-green-500 focus:border-green-600',
     red: 'border-red-600 dark:border-red-500 dark:focus:border-red-500  focus:border-red-600'
 };
 const labelColorClasses = {
-    base: 'text-gray-500 dark:text-gray-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
+    base: 'text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500',
     green: 'text-green-600 dark:text-green-500',
     red: 'text-red-600 dark:text-red-500'
 };
@@ -90,7 +90,7 @@ function setType(node, _type) {
     on:paste
     use:setType={type}
     placeholder=" "
-    class={classNames(
+    class={twMerge(
       inputClasses[style],
       inputColorClasses[color],
       inputSizes[style][size],
@@ -99,7 +99,7 @@ function setType(node, _type) {
 
   <label
     for={id}
-    class={classNames(
+    class={twMerge(
       labelClasses[style],
       labelColorClasses[color],
       labelSizes[style][size],

package/dist/forms/Helper.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
 export let color = 'gray';
 const colorClasses = {
@@ -9,7 +9,7 @@ const colorClasses = {
 };
 </script>
 
-<p {...$$restProps} class={classNames(helperClass, colorClasses[color], $$props.class)}>
+<p {...$$restProps} class={twMerge(helperClass, colorClasses[color], $$props.class)}>
   <slot />
 </p>
 

package/dist/forms/Input.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script>import Wrapper from '../utils/Wrapper.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let type = 'text';
 export let value = undefined;
@@ -18,7 +18,7 @@ const borderClasses = {
     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',
+    base: 'focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-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'
 };
@@ -48,7 +48,18 @@ $: _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);
+    inputClass = twMerge([
+        defaultClass,
+        ($$slots.left && leftPadding[_size] || $$slots.right && rightPadding[_size]) || inputPadding[_size],
+        ringClasses[color],
+        colorClasses[_color],
+        borderClasses[_color],
+        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 items-center text-gray-500 dark:text-gray-400';
 </script>

package/dist/forms/Input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgG1C,QAAA,MAAM,SAAS;;;;gBADoH,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACzF,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA8F1C,QAAA,MAAM,SAAS;;;;gBADoH,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACzF,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/InputAddon.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 import { clampSize } from './Input.svelte';
 export let size = undefined;
@@ -21,7 +21,7 @@ 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);
+$: divClass = twMerge(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}>

package/dist/forms/Label.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'gray';
 export let defaultClass = 'text-sm font-medium block';
 export let show = true;
@@ -14,7 +14,7 @@ $: {
     const control = node?.control;
     color = control?.disabled ? 'disabled' : color;
 }
-$: labelClass = classNames(defaultClass, colorClasses[color], $$props.class);
+$: labelClass = twMerge(defaultClass, colorClasses[color], $$props.class);
 </script>
 
 {#if show}

package/dist/forms/MultiSelect.svelte

@@ -0,0 +1,131 @@
+<script>export let items = [];
+export let value = [];
+export let highlighted = false;
+export let defaultClass = '';
+let show = false;
+// Container
+const multiSelectClass = 'relative !min-h-[55px] p-2 text-gray-900 bg-gray-50 border border-gray-300 flex items-center rounded-lg gap-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-2 dark:focus:border-2 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500';
+// Pills Button
+const multiSelectBtn = 'flex items-center gap-1 rounded-lg border overflow-hidden border-gray-300 dark:border-gray-500';
+// Dropdown
+const multiSelectDropdown = 'absolute h-32 border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white left-0 top-[calc(100%+1rem)] rounded-lg bg-gray-50 cursor-pointer overflow-y-scroll w-full';
+// Items
+const itemsClass = 'p-1 pl-2 pr-2 hover:bg-gray-100 dark:hover:bg-gray-600';
+// Selected items
+const itemsSelectClass = 'bg-primary-500 text-white hover:bg-primary-600';
+const selectOption = (select) => {
+    if (value.includes(select)) {
+        // todo
+    }
+    else {
+        value.push(select);
+        value = value;
+    }
+};
+const clearAll = () => {
+    value = [];
+};
+const clearThisOption = (select) => {
+    if (value.includes(select)) {
+        value = value.filter((o) => o !== select);
+    }
+};
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  on:click={() => (show = !show)}
+  on:blur={() => (show = !show)}
+  tabindex="-1"
+  class="{multiSelectClass} {defaultClass}">
+  <span class="flex gap-2 flex-wrap">
+    {#if value.length}
+      {#each value as select, index}
+        <button class={multiSelectBtn}>
+          <span class="p-[1px] ml-[1.5px]">{select.name}</span>
+          <svg
+            on:click={(e) => {
+              e.stopPropagation();
+              clearThisOption(select);
+            }}
+            class="w-4 h-full pr-[1.5px] hover:bg-primary-500"
+            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>
+      {/each}
+    {/if}
+  </span>
+  <div class="flex ml-auto gap-2">
+    <button
+      on:click={(e) => {
+        e.stopPropagation();
+        clearAll();
+      }}>
+      <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>
+    <div class="w-[1px] bg-gray-300" />
+    <button>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        class="h-4 w-4 mb-1 mr-1 cursor-pointer"
+        aria-label="chevron down"
+        fill="none"
+        viewBox="0 0 20 20"
+        role="img"
+        stroke-width="2"
+        ><path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M19 9l-7 7-7-7"
+          stroke="currentColor" /></svg>
+    </button>
+  </div>
+
+  {#if show}
+    <div class={multiSelectDropdown}>
+      {#each items as item, index}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div
+          on:click={(e) => {
+            e.stopPropagation();
+            selectOption(item);
+          }}
+          class="{itemsClass} {value.includes(item) && highlighted ? itemsSelectClass : ''}">
+          {item.name}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<!--
+  @component
+  ## Example
+  ```
+  <script>
+    import MultiSelect from '../../../lib/forms/MultiSelect.svelte';
+
+    let selected = [];
+    let countries = [
+      {value:"us", name: "United States"},
+      {value:"ca", name: "Canada"},
+      {value:"fr", name: "France"},
+      {value:"jp", name: "Japan"},
+      {value:"en", name: "England"},
+    ]
+  </script>
+
+  <MultiSelect items={countries} bind:value={selected} />
+  ```
+-->

package/dist/forms/MultiSelect.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SelectOptionType } from '../types';
+declare const __propDef: {
+    props: {
+        items?: SelectOptionType[] | undefined;
+        value?: SelectOptionType[] | undefined;
+        highlighted?: boolean | undefined;
+        defaultClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MultiSelectProps = typeof __propDef.props;
+export type MultiSelectEvents = typeof __propDef.events;
+export type MultiSelectSlots = typeof __propDef.slots;
+/**
+ * ## Example
+ * ```
+ * <script>
+ *   import MultiSelect from '../../../lib/forms/MultiSelect.svelte';
+ *
+ *   let selected = [];
+ *   let countries = [
+ *     {value:"us", name: "United States"},
+ *     {value:"ca", name: "Canada"},
+ *     {value:"fr", name: "France"},
+ *     {value:"jp", name: "Japan"},
+ *     {value:"en", name: "England"},
+ *   ]
+ * </script>
+ *
+ * <MultiSelect items={countries} bind:value={selected} />
+ * ```
+ */
+export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
+}
+export {};
+//# sourceMappingURL=MultiSelect.svelte.d.ts.map

package/dist/forms/MultiSelect.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/MultiSelect.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AA6FjD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/forms/Radio.svelte

@@ -1,5 +1,5 @@
 <script context="module">// this part is shared between Radio and Checkbox
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 const colorClasses = {
     primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600',
     secondary: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600',
@@ -11,8 +11,9 @@ const colorClasses = {
     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);
+export const labelClass = (inline, extraClass) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
+export let spacing = 'mr-2';
+export const inputClass = (custom, color, rounded, tinted, extraClass) => twMerge('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', spacing, 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';

package/dist/forms/Radio.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 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;
+export declare let spacing: string;
+export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => string;
 import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {

package/dist/forms/Radio.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WACW,CAAC;AAE1E,eAAO,MAAM,UAAU,WACb,OAAO,SACR,aAAa,WACX,OAAO,UACR,OAAO,cACH,MAAM,GAAG,OAAO,WAU3B,CAAC;AAIN,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA4B9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WACM,CAAC;AACrE,eAAO,IAAI,OAAO,EAAE,MAAe,CAAC;AAEpC,eAAO,MAAM,UAAU,WACb,OAAO,SACR,aAAa,WACX,OAAO,UACR,OAAO,cACH,MAAM,WAUjB,CAAC;AAIN,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA4B9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/Range.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let value;
 export let size = 'md';
 const sizes = {
@@ -7,7 +7,7 @@ const sizes = {
     lg: 'h-3 range-lg'
 };
 let inputClass;
-$: inputClass = classNames('w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700', sizes[size] ?? sizes.md, $$props.class);
+$: inputClass = twMerge('w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700', sizes[size] ?? sizes.md, $$props.class);
 </script>
 
 <input

package/dist/forms/Select.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let items = [];
 export let value = undefined;
 export let placeholder = 'Choose option ...';
@@ -13,7 +13,7 @@ const sizes = {
     lg: 'text-base py-3 px-4'
 };
 let selectClass;
-$: selectClass = classNames(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$restProps.class);
+$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$restProps.class);
 </script>
 
 <select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>