flowbite-svelte 1.10.4 → 1.10.6

package/dist/typography/blockquote/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type BlockquoteVariants = VariantProps<typeof blockquote>;
 export declare const blockquote: import("tailwind-variants").TVReturnType<{
     border: {
@@ -100,4 +101,4 @@ export declare const blockquote: import("tailwind-variants").TVReturnType<{
         "9xl": string;
     };
 }, undefined, "font-semibold text-gray-900 dark:text-white", unknown, unknown, undefined>>;
-export type BlockquoteTheme = string;
+export type BlockquoteTheme = ClassValue;

package/dist/typography/descriptionlist/DescriptionList.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { descriptionList } from "./index";
   import type { DescriptionListProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, tag, class: className, ...restProps }: DescriptionListProps = $props();
@@ -12,12 +11,12 @@
   let descCls = $derived(
     descriptionList({
       tag,
-      class: clsx(className)
+      class: clsx(theme, className)
     })
   );
 </script>
 
-<svelte:element this={tag} {...restProps} class={cn(descCls, theme)}>
+<svelte:element this={tag} {...restProps} class={descCls}>
   {@render children()}
 </svelte:element>
 

package/dist/typography/descriptionlist/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type DescriptionListVariants = VariantProps<typeof descriptionList>;
 export declare const descriptionList: import("tailwind-variants").TVReturnType<{
     tag: {
@@ -16,4 +17,4 @@ export declare const descriptionList: import("tailwind-variants").TVReturnType<{
         dd: string;
     };
 }, undefined, undefined, unknown, unknown, undefined>>;
-export type DescriptionListTheme = string;
+export type DescriptionListTheme = ClassValue;

package/dist/typography/heading/Heading.svelte

@@ -2,17 +2,16 @@
   import clsx from "clsx";
   import { heading } from "./index";
   import type { HeadingProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, tag = "h1", class: className, ...restProps }: HeadingProps = $props();
 
   const theme = getTheme("heading");
 
-  let headingCls = $derived(heading({ tag, class: clsx(className) }));
+  let headingCls = $derived(heading({ tag, class: clsx(theme, className) }));
 </script>
 
-<svelte:element this={tag} {...restProps} class={cn(headingCls, theme)}>
+<svelte:element this={tag} {...restProps} class={headingCls}>
   {@render children()}
 </svelte:element>
 

package/dist/typography/heading/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type HeadingVariants = VariantProps<typeof heading>;
 export declare const heading: import("tailwind-variants").TVReturnType<{
     tag: {
@@ -28,4 +29,4 @@ export declare const heading: import("tailwind-variants").TVReturnType<{
         h6: string;
     };
 }, undefined, "font-bold text-gray-900 dark:text-white", unknown, unknown, undefined>>;
-export type HeadingTheme = string;
+export type HeadingTheme = ClassValue;

package/dist/typography/hr/Hr.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { hr, type HrTheme } from "./index";
   import type { HrProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, divClass, class: className, innerDivClass, ...restProps }: HrProps = $props();
@@ -13,14 +12,14 @@
 </script>
 
 {#if children}
-  <div {...restProps} class={cn(container({ class: divClass }), (theme as HrTheme)?.container)}>
-    <hr class={cn(base({ class: clsx(className) }), (theme as HrTheme)?.base)} />
-    <div class={cn(content({ class: innerDivClass }), (theme as HrTheme)?.content)}>
+  <div {...restProps} class={container({ class: clsx((theme as HrTheme)?.container, divClass) })}>
+    <hr class={base({ class: clsx((theme as HrTheme)?.base, className) })} />
+    <div class={content({ class: clsx((theme as HrTheme)?.content, innerDivClass) })}>
       {@render children()}
     </div>
   </div>
 {:else}
-  <hr class={cn(base({ class: clsx(className) }), (theme as HrTheme)?.base)} {...restProps} />
+  <hr class={base({ class: clsx((theme as HrTheme)?.base, className) })} {...restProps} />
 {/if}
 
 <!--

package/dist/typography/hr/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const hr: import("tailwind-variants").TVReturnType<{
     withChildren: {
         true: {
@@ -33,4 +34,4 @@ export declare const hr: import("tailwind-variants").TVReturnType<{
     content: string;
 }, undefined, unknown, unknown, undefined>>;
 export type HrSlots = keyof typeof hr.slots;
-export type HrTheme = Partial<Record<HrSlots, string>>;
+export type HrTheme = Partial<Record<HrSlots, ClassValue>>;

package/dist/typography/img/EnhancedImg.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { img, type ImgTheme } from ".";
   import type { EnhandedImgProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { src, href, caption, size, figClass, class: imgClass, captionClass, ...restProps }: EnhandedImgProps = $props();
@@ -14,14 +13,14 @@
 
 {#snippet imageSlot()}
   {#if caption}
-    <figure class={cn(figure({ class: figClass }), (theme as ImgTheme)?.figure)}>
-      <enhanced:img {src} {...restProps} class={cn(base({ class: clsx(imgClass) }), (theme as ImgTheme)?.base)} />
-      <figcaption class={cn(figureCaption({ class: captionClass }), (theme as ImgTheme)?.figureCaption)}>
+    <figure class={figure({ class: clsx((theme as ImgTheme)?.figure, figClass) })}>
+      <enhanced:img {src} {...restProps} class={base({ class: clsx((theme as ImgTheme)?.base, imgClass) })} />
+      <figcaption class={figureCaption({ class: clsx((theme as ImgTheme)?.figureCaption, captionClass) })}>
         {@html caption}
       </figcaption>
     </figure>
   {:else}
-    <enhanced:img {src} {...restProps} class={cn(base({ class: clsx(imgClass) }), (theme as ImgTheme)?.base)} />
+    <enhanced:img {src} {...restProps} class={base({ class: clsx((theme as ImgTheme)?.base, imgClass) })} />
   {/if}
 {/snippet}
 

package/dist/typography/img/Img.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { img, type ImgTheme } from ".";
   import type { ImgProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { size = "none", effect = "none", caption, class: imgClass, figClass, captionClass, href, ...restProps }: ImgProps = $props();
@@ -14,14 +13,14 @@
 
 {#snippet imageSlot()}
   {#if caption}
-    <figure class={cn(figure({ class: figClass }), (theme as ImgTheme)?.figure)}>
-      <img {...restProps} class={cn(base({ class: clsx(imgClass) }), (theme as ImgTheme)?.base)} />
-      <figcaption class={cn(figureCaption({ class: captionClass }), (theme as ImgTheme)?.figureCaption)}>
+    <figure class={figure({ class: clsx((theme as ImgTheme)?.figure, figClass) })}>
+      <img {...restProps} class={base({ class: clsx((theme as ImgTheme)?.base, imgClass) })} />
+      <figcaption class={figureCaption({ class: clsx((theme as ImgTheme)?.figureCaption, captionClass) })}>
         {@html caption}
       </figcaption>
     </figure>
   {:else}
-    <img {...restProps} class={cn(base({ class: clsx(imgClass) }), (theme as ImgTheme)?.base)} />
+    <img {...restProps} class={base({ class: clsx((theme as ImgTheme)?.base, imgClass) })} />
   {/if}
 {/snippet}
 

package/dist/typography/img/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ImgVariants = VariantProps<typeof img>;
 export declare const img: import("tailwind-variants").TVReturnType<{
     size: {
@@ -188,4 +189,4 @@ export declare const img: import("tailwind-variants").TVReturnType<{
     figureCaption: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ImgSlots = keyof typeof img.slots;
-export type ImgTheme = Partial<Record<ImgSlots, string>>;
+export type ImgTheme = Partial<Record<ImgSlots, ClassValue>>;

package/dist/typography/layout/Layout.svelte

@@ -2,17 +2,16 @@
   import clsx from "clsx";
   import { layout } from "./index";
   import type { LayoutProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, ...restProps }: LayoutProps = $props();
 
   const theme = getTheme("layout");
 
-  let classDiv = $derived(layout({ class: clsx(className) }));
+  let divCls = $derived(layout({ class: clsx(theme, className) }));
 </script>
 
-<div {...restProps} class={cn(classDiv, theme)}>
+<div {...restProps} class={divCls}>
   {@render children()}
 </div>
 

package/dist/typography/layout/theme.d.ts

@@ -1,2 +1,3 @@
+import type { ClassValue } from "svelte/elements";
 export declare const layout: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "grid grid-cols-1 sm:grid-cols-2", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "grid grid-cols-1 sm:grid-cols-2", unknown, unknown, undefined>>;
-export type LayoutTheme = string;
+export type LayoutTheme = ClassValue;

package/dist/typography/list/Li.svelte

@@ -2,7 +2,6 @@
   import { getContext } from "svelte";
   import type { LiProps } from "../../types";
   import clsx from "clsx";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, icon, class: className, ...restProps }: LiProps = $props();
@@ -11,7 +10,7 @@
 
   const getCtxClass = getContext<() => string>("ctxClass");
 
-  let liCls = $derived(cn(getCtxClass(), icon && "flex items-center", clsx(className), theme));
+  let liCls = $derived(clsx(getCtxClass(), icon && "flex items-center", theme, className));
 </script>
 
 <li {...restProps} class={liCls}>

package/dist/typography/list/List.svelte

@@ -3,7 +3,6 @@
   import { list } from "./index";
   import type { ListProps } from "../../types";
   import clsx from "clsx";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, tag = "ul", isContenteditable = false, position = "inside", ctxClass, class: className, ...restProps }: ListProps = $props();
@@ -18,10 +17,10 @@
     contextClass = ctxClass || "";
   });
 
-  let classList = $derived(list({ position, tag, class: clsx(className) }));
+  let classList = $derived(list({ position, tag, class: clsx(theme, className) }));
 </script>
 
-<svelte:element this={tag} {...restProps} class={cn(classList, theme)} contenteditable={isContenteditable}>
+<svelte:element this={tag} {...restProps} class={classList} contenteditable={isContenteditable}>
   {@render children()}
 </svelte:element>
 

package/dist/typography/list/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ListVariants = VariantProps<typeof list>;
 export declare const list: import("tailwind-variants").TVReturnType<{
     tag: {
@@ -31,4 +32,4 @@ export declare const list: import("tailwind-variants").TVReturnType<{
         outside: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export type ListTheme = string;
+export type ListTheme = ClassValue;

package/dist/typography/mark/Mark.svelte

@@ -10,7 +10,7 @@
   const theme = getTheme("mark");
 </script>
 
-<mark {...restProps} class={cn(mark({ class: clsx(className) }), theme)}>
+<mark {...restProps} class={mark({ class: clsx(theme, className) })}>
   {@render children()}
 </mark>
 

package/dist/typography/mark/theme.d.ts

@@ -1,2 +1,3 @@
+import type { ClassValue } from "svelte/elements";
 export declare const mark: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm", unknown, unknown, undefined>>;
-export type MarkTheme = string;
+export type MarkTheme = ClassValue;

package/dist/typography/paragraph/P.svelte

@@ -2,17 +2,16 @@
   import clsx from "clsx";
   import { paragraph } from "./index";
   import type { ParagraphProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className = "text-gray-900 dark:text-white", height = "normal", align = "left", justify = false, italic, firstUpper = false, whitespace = "normal", size = "base", space = "normal", weight = "normal", ...restProps }: ParagraphProps = $props();
 
   const theme = getTheme("p");
 
-  let classP = $derived(paragraph({ height, size, weight, space, align, justify, italic, firstUpper, whitespace, class: clsx(className) }));
+  let classP = $derived(paragraph({ height, size, weight, space, align, justify, italic, firstUpper, whitespace, class: clsx(theme, className) }));
 </script>
 
-<p {...restProps} class={cn(classP, theme)}>
+<p {...restProps} class={classP}>
   {@render children()}
 </p>
 

package/dist/typography/paragraph/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ParagraphVariants = VariantProps<typeof paragraph>;
 export declare const paragraph: import("tailwind-variants").TVReturnType<{
     size: {
@@ -223,4 +224,4 @@ export declare const paragraph: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "text-gray-900 dark:text-white", unknown, unknown, undefined>>;
-export type ParagraphTheme = string;
+export type ParagraphTheme = ClassValue;

package/dist/typography/secondary/Secondary.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { secondary } from "./index";
   import type { SecondaryProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, ...restProps }: SecondaryProps = $props();
@@ -10,7 +9,7 @@
   const theme = getTheme("secondary");
 </script>
 
-<small {...restProps} class={cn(secondary({ class: clsx(className) }), theme)}>
+<small {...restProps} class={secondary({ class: clsx(theme, className) })}>
   {@render children()}
 </small>
 

package/dist/typography/secondary/theme.d.ts

@@ -1,2 +1,3 @@
+import type { ClassValue } from "svelte/elements";
 export declare const secondary: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 dark:text-gray-400 font-semibold", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 dark:text-gray-400 font-semibold", unknown, unknown, undefined>>;
-export type SecondaryTheme = string;
+export type SecondaryTheme = ClassValue;

package/dist/typography/span/Span.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { span } from "./index";
   import type { SpanProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, italic, underline, linethrough, uppercase, gradient, highlight, decoration, decorationColor, decorationThickness, ...restProps }: SpanProps = $props();
@@ -20,12 +19,12 @@
       decoration,
       decorationColor,
       decorationThickness,
-      class: clsx(className)
+      class: clsx(theme, className)
     })
   );
 </script>
 
-<span {...restProps} class={cn(classSpan, theme)}>
+<span {...restProps} class={classSpan}>
   {#if children}
     {@render children()}
   {/if}

package/dist/typography/span/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SpanVariants = VariantProps<typeof span>;
 export declare const span: import("tailwind-variants").TVReturnType<{
     italic: {
@@ -244,4 +245,4 @@ export declare const span: import("tailwind-variants").TVReturnType<{
         "0": string;
     };
 }, undefined, undefined, unknown, unknown, undefined>>;
-export type SpanTheme = string;
+export type SpanTheme = ClassValue;

package/dist/video/Video.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { VideoProps } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, type = "video/mp4", trackSrc, src, srclang = "en", label = "english_captions", class: classname, ...restProps }: VideoProps = $props();
@@ -8,7 +8,7 @@
   const theme = getTheme("span");
 </script>
 
-<video {...restProps} class={cn(classname, theme)}>
+<video {...restProps} class={clsx(theme, classname)}>
   <source {src} {type} />
   {#if children}
     {@render children()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.10.4",
+  "version": "1.10.6",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {