flowbite-svelte 0.37.5 → 0.38.1

package/dist/toolbar/Toolbar.svelte

@@ -1,13 +1,13 @@
 <script>import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
-import classNames from 'classnames';
+import { twMerge, twJoin } from 'tailwind-merge';
 import Frame from '../utils/Frame.svelte';
 const separators = writable(false);
 setContext('toolbar', separators);
 export let color = 'dark';
 export let embedded = false;
 let divClass;
-$: divClass = classNames('flex justify-between items-center', embedded || 'p-2', $$props.class);
+$: divClass = twMerge('flex justify-between items-center', embedded || 'p-2', $$props.class);
 const divideColors = {
     gray: 'divide-gray-400 dark:divide-gray-700',
     red: 'divide-red-400 dark:divide-red-700',
@@ -21,7 +21,7 @@ const divideColors = {
     none: ''
 };
 let separatorsClass;
-$: separatorsClass = classNames($separators && 'sm:divide-x', divideColors[color]);
+$: separatorsClass = twJoin($separators && 'sm:divide-x', divideColors[color]);
 </script>
 
 <Frame {...$$restProps} class={divClass} color={embedded ? 'none' : color} rounded={!embedded}>

package/dist/toolbar/ToolbarButton.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 const background = getContext('background');
 export let color = 'default';
 export let name = undefined;
@@ -25,7 +25,7 @@ const sizing = {
     lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5'
 };
 let buttonClass;
-$: buttonClass = classNames('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
+$: buttonClass = twMerge('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
     (background ? 'hover:bg-gray-100 dark:hover:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
 const svgSizes = {
     xs: 'w-3 h-3',

package/dist/tooltips/Tooltip.svelte

@@ -1,5 +1,5 @@
 <script>import Popper from '../utils/Popper.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let type = 'dark';
 export let defaultClass = 'py-2 px-3 text-sm font-medium';
 const types = {
@@ -14,7 +14,7 @@ $: {
         type = 'custom';
     else
         $$restProps.color = 'none';
-    toolTipClass = classNames('tooltip', defaultClass, types[type], $$props.class);
+    toolTipClass = twMerge('tooltip', defaultClass, types[type], $$props.class);
 }
 </script>
 

package/dist/typography/A.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let href = '#';
 export let color = 'text-primary-600 dark:text-primary-500';
 export let aClass = 'inline-flex items-center hover:underline';
 </script>
 
-<a {...$$restProps} {href} class={classNames(aClass, color, $$props.class)}>
+<a {...$$restProps} {href} class={twMerge(aClass, color, $$props.class)}>
   <slot />
 </a>
 

package/dist/typography/Blockquote.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let border = false;
 export let italic = true;
 export let borderClass = 'border-l-4 border-gray-300 dark:border-gray-500';
@@ -31,7 +31,7 @@ const sizes = {
 
 <blockquote
   {...$$restProps}
-  class={classNames(
+  class={twMerge(
     baseClass,
     alignmentClasses[alignment],
     sizes[size],

package/dist/typography/DescriptionList.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let tag;
 export let dtClass = 'text-gray-500 md:text-lg dark:text-gray-400';
 export let ddClass = 'text-lg font-semibold';
-let classDesc = classNames(tag === 'dt' ? dtClass : ddClass, $$props.class);
+let classDesc = twMerge(tag === 'dt' ? dtClass : ddClass, $$props.class);
 </script>
 
 <svelte:element this={tag} {...$$restProps} class={classDesc}>

package/dist/typography/Heading.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let tag = 'h1';
 export let color = 'text-gray-900 dark:text-white';
 export let customSize = '';
@@ -15,7 +15,7 @@ const textSizes = {
 <svelte:element
   this={tag}
   {...$$restProps}
-  class={classNames(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
+  class={twMerge(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
   <slot />
 </svelte:element>
 

package/dist/typography/Hr.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let icon = false;
 export let width = 'w-full';
 export let height = 'h-px';
@@ -7,9 +7,9 @@ export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
 export let iconDivClass = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
 export let textSpanClass = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white ';
 export let middleBgColor = 'dark:bg-gray-900';
-let horizontalClass = classNames(hrClass, width, height, $$props.class);
-let classDiv = classNames(divClass, $$slots && 'relative', $$props.classDiv);
-let middleClass = classNames(middleBgColor, icon ? iconDivClass : textSpanClass);
+let horizontalClass = twMerge(hrClass, width, height, $$props.class);
+let classDiv = twMerge(divClass, $$slots && 'relative', $$props.classDiv);
+let middleClass = twMerge(middleBgColor, icon ? iconDivClass : textSpanClass);
 </script>
 
 {#if $$slots}

package/dist/typography/Img.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let caption = undefined;
 export let src = undefined;
 export let srcset = undefined;
@@ -13,13 +13,13 @@ export let captionClass = 'mt-2 text-sm text-center text-gray-500 dark:text-gray
 
 {#if caption}
   <figure class={figClass}>
-    <img class={classNames(imgClass, size, alignment, effect, $$props.class)} {src} {srcset} {alt} />
+    <img class={twMerge(imgClass, size, alignment, effect, $$props.class)} {src} {srcset} {alt} />
     <figcaption class={captionClass}>{@html caption}</figcaption>
   </figure>
 {:else}
   <img
     {...$$restProps}
-    class={classNames(imgClass, size, alignment, effect, $$props.class)}
+    class={twMerge(imgClass, size, alignment, effect, $$props.class)}
     {src}
     {srcset}
     {alt} />

package/dist/typography/Layout.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divClass = 'grid';
 export let cols = 'grid-cols-1 sm:grid-cols-2';
 export let gap;
-let classDiv = classNames(divClass, 'gap-' + String(gap), cols);
+let classDiv = twMerge(divClass, 'gap-' + String(gap), cols);
 </script>
 
 <div {...$$restProps} class={classDiv}>

package/dist/typography/Li.svelte

@@ -1,7 +1,7 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let icon = false;
 export let liClass = '';
-let classLi = classNames(liClass, icon && 'flex items-center', $$props.class);
+let classLi = twMerge(liClass, icon && 'flex items-center', $$props.class);
 </script>
 
 <li {...$$restProps} class={classLi}>

package/dist/typography/List.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let tag = 'ul';
 export let list = undefined;
 export let position = 'inside';
@@ -11,7 +11,7 @@ let positions = {
     inside: 'list-inside',
     outside: 'list-outside'
 };
-let classList = classNames(lists[list ?? (tag === 'ul' ? 'disc' : 'ol' ? 'decimal' : 'none')], positions[position], $$props.class);
+let classList = twMerge(lists[list ?? (tag === 'ul' ? 'disc' : 'ol' ? 'decimal' : 'none')], positions[position], $$props.class);
 </script>
 
 <svelte:element this={tag} {...$$restProps} class={classList}>

package/dist/typography/Mark.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'text-white dark:bg-blue-500';
 export let bgColor = 'bg-blue-600';
 export let markClass = 'px-2 rounded';
 </script>
 
-<mark {...$$restProps} class={classNames(markClass, bgColor, color, $$props.class)}>
+<mark {...$$restProps} class={twMerge(markClass, bgColor, color, $$props.class)}>
   <slot />
 </mark>
 

package/dist/typography/P.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'text-gray-900 dark:text-white';
 export let height = 'normal';
 export let align = 'left';
@@ -67,7 +67,7 @@ let colorAndopacity = color
     .map((element) => element.trim())
     .map((element) => element + '/' + String(opacity))
     .join(' ');
-let classP = classNames(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
+let classP = twMerge(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
 </script>
 
 <p {...$$restProps} class={classP}>

package/dist/typography/Secondary.svelte

@@ -1,9 +1,9 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'text-gray-500 dark:text-gray-400';
 export let secondaryClass = 'font-semibold';
 </script>
 
-<small {...$$restProps} class={classNames(color, secondaryClass, $$props.class)}>
+<small {...$$restProps} class={twMerge(color, secondaryClass, $$props.class)}>
   <slot />
 </small>
 

package/dist/typography/Span.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let italic = false;
 export let underline = false;
 export let linethrough = false;
@@ -8,8 +8,8 @@ export let highlight = false;
 export let highlightClass = 'text-blue-600 dark:text-blue-500';
 export let decorationClass = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
 export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
-let underlineClass = classNames('underline', decorationClass);
-let classSpan = classNames(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
+let underlineClass = twMerge('underline', decorationClass);
+let classSpan = twMerge(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
 </script>
 
 <span {...$$restProps} class={classSpan}>

package/dist/utils/CloseButton.svelte

@@ -1,9 +1,9 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import ToolbarButton from '../toolbar/ToolbarButton.svelte';
 export let name = 'Close';
 </script>
 
-<ToolbarButton on:click {name} {...$$restProps} class={classNames('ml-auto', $$props.class)} let:svgSize>
+<ToolbarButton on:click {name} {...$$restProps} class={twMerge('ml-auto', $$props.class)} let:svgSize>
   <svg class={svgSize} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"

package/dist/utils/Frame.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
 import { noop } from 'svelte/internal';
 setContext('background', true);
@@ -80,7 +80,7 @@ const borderColors = {
     none: ''
 };
 let divClass;
-$: divClass = classNames(bgColors[color], textColors[color], rounded && (color === 'dropdown' ? 'rounded' : 'rounded-lg'), border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
+$: divClass = twMerge(bgColors[color], textColors[color], rounded && (color === 'dropdown' ? 'rounded' : 'rounded-lg'), border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
 </script>
 
 {#if transition}

package/dist/utils/MenuButton.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import ToolbarButton from '../toolbar/ToolbarButton.svelte';
 export let name = undefined;
 export let vertical = false;
 </script>
 
-<ToolbarButton on:click {name} {...$$restProps} class={classNames($$props.class)} let:svgSize>
+<ToolbarButton on:click {name} {...$$restProps} class={twMerge($$props.class)} let:svgSize>
   <svg
     class={svgSize}
     aria-hidden="true"

package/dist/utils/Popper.svelte

@@ -1,6 +1,6 @@
 <script>import { onMount } from 'svelte';
 import { createPopper } from '@popperjs/core';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import createEventDispatcher from './createEventDispatcher';
 import Frame from './Frame.svelte';
 export let activeContent = false;
@@ -119,8 +119,8 @@ function optional(pred, func) {
 }
 let position = 'bottom';
 $: position = placement.split('-', 1)[0];
-let arrowClass;
-$: arrowClass = classNames('after:w-[9px] after:h-[9px] after:rotate-45 bg-inherit after:bg-inherit invisible after:visible after:block border-inherit after:border-inherit', position === 'top' && ($$props.border ? 'after:border-b after:border-r -bottom-[5px]' : '-bottom-[4px]'), position === 'bottom' && ($$props.border ? 'after:border-t after:border-l -top-[5px]' : '-top-[4px]'), position === 'left' && ($$props.border ? 'after:border-t after:border-r -right-[5px]' : '-right-[4px]'), position === 'right' && ($$props.border ? 'after:border-b after:border-l -left-[5px]' : '-left-[4px]'));
+let arrowClass = 'bottom';
+$: arrowClass = twMerge('absolute w-[9px] h-[9px] rotate-45 bg-inherit', position === 'top' && ($$props.border ? 'border-b border-r -bottom-[5px]' : '-bottom-[4px]'), position === 'bottom' && ($$props.border ? 'border-t border-l -top-[5px]' : '-top-[4px]'), position === 'left' && ($$props.border ? 'border-t border-r -right-[5px]' : '-right-[4px]'), position === 'right' && ($$props.border ? 'border-b border-l -left-[5px]' : '-left-[4px]'));
 </script>
 
 {#if !triggerEl}
@@ -138,7 +138,7 @@ $: arrowClass = classNames('after:w-[9px] after:h-[9px] after:rotate-45 bg-inher
     on:mouseenter={optional(activeContent && !clickable, showHandler)}
     on:mouseleave={optional(activeContent && !clickable, hideHandler)}
     {...$$restProps}
-    class={classNames('outline-none', $$props.class)}>
+    class={twMerge('outline-none', $$props.class)}>
     <slot />
     {#if arrow}<div class={arrowClass} />{/if}
   </Frame>

package/dist/video/Video.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let src;
 export let type = 'video/mp4';
 export let trackSrc = '';
 export let srclang = 'en';
 export let label = 'english_captions';
-let videoClass = classNames($$props.class);
+let videoClass = twMerge($$props.class);
 </script>
 
 <video {...$$restProps} class={videoClass}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.37.5",
+  "version": "0.38.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -55,6 +55,7 @@
     "svelte-meta-tags": "^2.7.2",
     "svelte-preprocess": "^5.0.4",
     "svelte2tsx": "^0.6.15",
+    "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
@@ -109,7 +110,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "classnames": "^2.3.2",
+    "tailwind-merge": "^1.13.1",
     "flowbite": "^1.6.5"
   },
   "engines": {