flowbite-svelte 1.4.2 → 1.5.0

package/dist/carousel/Indicators.svelte

@@ -2,13 +2,12 @@
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
   import { indicators } from "./theme";
-  import { Indicator, type IndicatorsProps, type State } from "..";
-  import clsx from "clsx";
+  import { Indicator, type IndicatorsProps, type State, cn } from "..";
 
   let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
 
   const state = getContext<Writable<State>>("state");
-  const { base, indicator } = indicators({ position });
+  const { base, indicator } = $derived(indicators({ position }));
 
   function goToIndex(newIndex: number) {
     state.update((_state) => {
@@ -24,14 +23,14 @@
   }
 </script>
 
-<div class={base({ class: clsx(className) })} {...restProps}>
+<div class={cn(base(), className)} {...restProps}>
   {#each $state.images as _, idx}
     {@const selected = $state.index === idx}
     <button onclick={() => goToIndex(idx)}>
       {#if children}
         {@render children({ selected, index: idx })}
       {:else}
-        <Indicator class={indicator({ selected, class: selected ? activeClass : inactiveClass })} />
+        <Indicator class={cn(indicator({ selected }), selected ? activeClass : inactiveClass)} />
       {/if}
     </button>
   {/each}
@@ -41,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L442)
+[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L428)
 ## Props
 @prop children
 @prop activeClass

package/dist/carousel/Indicators.svelte.d.ts

@@ -2,7 +2,7 @@ import { type IndicatorsProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L442)
+ * [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L428)
  * ## Props
  * @prop children
  * @prop activeClass

package/dist/carousel/Slide.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
   import { fly } from "svelte/transition";
   import { slide } from "./theme";
-  import type { SlideProps, State } from "../types";
+  import { type SlideProps, type State, cn } from "..";
 
   const state = getContext<Writable<State>>("state");
 
@@ -26,7 +25,7 @@
     duration: $state.slideDuration
   });
 
-  let imgClass = $derived(slide({ class: clsx(className) }));
+  let imgClass = cn(slide(), className);
 </script>
 
 {#if transition}
@@ -43,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L472)
+[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L458)
 ## Props
 @prop image
 @prop transition

package/dist/carousel/Slide.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { SlideProps } from "../types";
+import { type SlideProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L472)
+ * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L458)
  * ## Props
  * @prop image
  * @prop transition

package/dist/carousel/Thumbnail.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { thumbnail } from "./theme";
-  import type { ThumbnailProps } from "../types";
+  import { type ThumbnailProps, cn } from "..";
+  import clsx from "clsx";
 
   let { selected, class: className, ...restProps }: ThumbnailProps = $props();
 </script>
@@ -12,7 +12,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L459)
+[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L445)
 ## Props
 @prop selected
 @prop class: className

package/dist/carousel/Thumbnail.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { ThumbnailProps } from "../types";
+import { type ThumbnailProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L459)
+ * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L445)
  * ## Props
  * @prop selected
  * @prop class: className

package/dist/carousel/Thumbnails.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
-  import Thumbnail from "./Thumbnail.svelte";
   import { thumbnails } from "./theme";
-  import type { ThumbnailsProps, State } from "../types";
+  import { type ThumbnailsProps, type State, Thumbnail, cn } from "..";
+  import clsx from "clsx";
 
-  let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass = "", throttleDelay = 650, class: className }: ThumbnailsProps = $props();
+  let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: ThumbnailsProps = $props();
 
   const state = getContext<Writable<State>>("state");
   if (!state) {
@@ -48,14 +47,14 @@
   });
 </script>
 
-<div class={thumbnails({ class: clsx(className) })}>
+<div class={cn(thumbnails(), className)}>
   {#each images as image, idx}
     {@const selected = index === idx}
     <button onclick={() => btnClick(idx)} aria-label={ariaLabel}>
       {#if children}
-        {@render children({ image, selected, imgClass, Thumbnail })}
+        {@render children({ image, selected, imgClass: cn(imgClass), Thumbnail })}
       {:else}
-        <Thumbnail {selected} {...image} class={imgClass} />
+        <Thumbnail {...image} {selected} class={clsx(imgClass)} />
       {/if}
     </button>
   {/each}
@@ -65,13 +64,13 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L463)
+[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
 ## Props
 @prop children
 @prop images = []
 @prop index = $bindable()
 @prop ariaLabel = "Click to view image"
-@prop imgClass = ""
+@prop imgClass
 @prop throttleDelay = 650
 @prop class: className
 -->

package/dist/carousel/Thumbnails.svelte.d.ts

@@ -1,14 +1,14 @@
-import type { ThumbnailsProps } from "../types";
+import { type ThumbnailsProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L463)
+ * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
  * ## Props
  * @prop children
  * @prop images = []
  * @prop index = $bindable()
  * @prop ariaLabel = "Click to view image"
- * @prop imgClass = ""
+ * @prop imgClass
  * @prop throttleDelay = 650
  * @prop class: className
  */

package/dist/carousel/index.d.ts

@@ -1,7 +1,8 @@
-import Carousel from "./Carousel.svelte";
-import ControlButton from "./ControlButton.svelte";
-import Controls from "./Controls.svelte";
-import Indicators from "./Indicators.svelte";
-import { carousel } from "./theme";
-import Thumbnails from "./Thumbnails.svelte";
-export { Carousel, carousel, ControlButton, Controls, Indicators, Thumbnails };
+export { default as Carousel } from "./Carousel.svelte";
+export { default as ControlButton } from "./ControlButton.svelte";
+export { default as Controls } from "./Controls.svelte";
+export { default as Indicators } from "./Indicators.svelte";
+export { carousel } from "./theme";
+export { default as Thumbnails } from "./Thumbnails.svelte";
+export { default as Slide } from "./Slide.svelte";
+export { default as Thumbnail } from "./Thumbnail.svelte";

package/dist/carousel/index.js

@@ -1,7 +1,8 @@
-import Carousel from "./Carousel.svelte";
-import ControlButton from "./ControlButton.svelte";
-import Controls from "./Controls.svelte";
-import Indicators from "./Indicators.svelte";
-import { carousel } from "./theme";
-import Thumbnails from "./Thumbnails.svelte";
-export { Carousel, carousel, ControlButton, Controls, Indicators, Thumbnails };
+export { default as Carousel } from "./Carousel.svelte";
+export { default as ControlButton } from "./ControlButton.svelte";
+export { default as Controls } from "./Controls.svelte";
+export { default as Indicators } from "./Indicators.svelte";
+export { carousel } from "./theme";
+export { default as Thumbnails } from "./Thumbnails.svelte";
+export { default as Slide } from "./Slide.svelte";
+export { default as Thumbnail } from "./Thumbnail.svelte";

package/dist/chart/Chart.svelte

@@ -2,7 +2,7 @@
   import type { ApexOptions } from "apexcharts";
   import type ApexCharts from "apexcharts";
   import "./chart.css";
-  import type { ChartProps } from "../types";
+  import { type ChartProps, cn } from "..";
 
   let { options, class: classname }: ChartProps = $props();
 
@@ -32,13 +32,13 @@
   }
 </script>
 
-<div use:initChart={options} class={classname}></div>
+<div use:initChart={options} class={cn(classname)}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ChartProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L478)
+[ChartProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L464)
 ## Props
 @prop options
 @prop class: classname

package/dist/chart/Chart.svelte.d.ts

@@ -1,9 +1,9 @@
 import "./chart.css";
-import type { ChartProps } from "../types";
+import { type ChartProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ChartProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L478)
+ * [ChartProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L464)
  * ## Props
  * @prop options
  * @prop class: classname

package/dist/chart/index.d.ts

@@ -1,2 +1 @@
-import Chart from "./Chart.svelte";
-export { Chart };
+export { default as Chart } from "./Chart.svelte";

package/dist/chart/index.js

@@ -1,2 +1 @@
-import Chart from "./Chart.svelte";
-export { Chart };
+export { default as Chart } from "./Chart.svelte";

package/dist/clipboard/Clipboard.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import Button from "../buttons/Button.svelte";
+  import clsx from "clsx";
+  import type { ClipboardProps } from "..";
+  import { clipboard } from "./theme";
+  import type { MouseEventHandler } from "svelte/elements";
+
+  let { children, embedded = false, value = $bindable(""), success = $bindable(false), onclick, class: className = "", ...restProps }: ClipboardProps = $props();
+
+  const copyToClipboard: MouseEventHandler<HTMLButtonElement> = async (ev) => {
+    onclick?.(ev);
+    if (ev.defaultPrevented) return;
+
+    if (success) return;
+
+    success = true;
+
+    const REG_HEX = /&#x([a-fA-F0-9]+);/g;
+    const decodedText = value.replace(REG_HEX, function (_match, group1) {
+      const num = parseInt(group1, 16);
+      return String.fromCharCode(num);
+    });
+
+    try {
+      await window.navigator.clipboard.writeText(decodedText);
+    } catch (error) {
+      console.error("Failed to copy to clipboard:", error);
+      success = false;
+      return;
+    }
+
+    setTimeout(() => {
+      success = false;
+    }, 2000);
+  };
+</script>
+
+<Button onclick={copyToClipboard} {...restProps} class={clipboard({ embedded, class: clsx(className) })}>
+  {@render children?.(success)}
+</Button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L471)
+## Props
+@prop children
+@prop embedded = false
+@prop value = $bindable("")
+@prop success = $bindable(false)
+@prop onclick
+@prop class: className = ""
+@prop ...restProps
+-->

package/dist/clipboard/Clipboard.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ClipboardProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L471)
+ * ## Props
+ * @prop children
+ * @prop embedded = false
+ * @prop value = $bindable("")
+ * @prop success = $bindable(false)
+ * @prop onclick
+ * @prop class: className = ""
+ * @prop ...restProps
+ */
+declare const Clipboard: import("svelte").Component<ClipboardProps, {}, "value" | "success">;
+type Clipboard = ReturnType<typeof Clipboard>;
+export default Clipboard;

package/dist/clipboard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Clipboard } from "./Clipboard.svelte";
+export { clipboard } from "./theme";

package/dist/clipboard/index.js

@@ -0,0 +1,2 @@
+export { default as Clipboard } from "./Clipboard.svelte";
+export { clipboard } from "./theme";

package/dist/clipboard/theme.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from "tailwind-variants";
+export type ClipboardVariants = VariantProps<typeof clipboard>;
+export declare const clipboard: import("tailwind-variants").TVReturnType<{
+    embedded: {
+        true: string;
+        false: string;
+    };
+}, undefined, "gap-2", {
+    embedded: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    embedded: {
+        true: string;
+        false: string;
+    };
+}, undefined, "gap-2", unknown, unknown, undefined>>;

package/dist/clipboard/theme.js

@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants";
+export const clipboard = tv({
+    base: "gap-2",
+    variants: {
+        embedded: {
+            true: "px-1 py-1 focus-within:ring-0 bg-transparent hover:bg-transparent text-inherit",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        embedded: false
+    }
+});

package/dist/darkmode/DarkMode.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { darkmode } from "./";
-  import type { DarkmodeProps } from "../types";
+  import { darkmode } from ".";
+  import { type DarkmodeProps, cn } from "..";
 
   // const THEME_PREFERENCE_KEY = 'color-theme';
   let { class: className, lightIcon, darkIcon, size = "md", ariaLabel = "Dark mode", ...restProps }: DarkmodeProps = $props();
 
-  const btnCls = darkmode({ class: className });
   const sizes = {
     sm: "w-4 h-4",
     md: "w-5 h-5",
@@ -31,7 +30,7 @@
   </script>
 </svelte:head>
 
-<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={btnCls} tabindex={0}>
+<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={cn(darkmode(), className)} tabindex={0}>
   <span class="hidden dark:block">
     {#if lightIcon}
       {@render lightIcon()}
@@ -61,7 +60,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L484)
+[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
 ## Props
 @prop class: className
 @prop lightIcon

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { DarkmodeProps } from "../types";
+import { type DarkmodeProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L484)
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
  * ## Props
  * @prop class: className
  * @prop lightIcon

package/dist/darkmode/index.d.ts

@@ -1,3 +1,2 @@
-import DarkMode from "./DarkMode.svelte";
-import { darkmode } from "./theme";
-export { DarkMode, darkmode };
+export { default as DarkMode } from "./DarkMode.svelte";
+export { darkmode } from "./theme";

package/dist/darkmode/index.js

@@ -1,3 +1,2 @@
-import DarkMode from "./DarkMode.svelte";
-import { darkmode } from "./theme";
-export { DarkMode, darkmode };
+export { default as DarkMode } from "./DarkMode.svelte";
+export { darkmode } from "./theme";

package/dist/datepicker/Datepicker.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
-  import { Button, ToolbarButton, type DatepickerProps } from "..";
+  import { Button, ToolbarButton, type DatepickerProps, cn } from "..";
   import { datepicker } from "./theme";
 
-  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), locale = "default", firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply }: DatepickerProps = $props();
+  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), locale = "default", firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, class: className }: DatepickerProps = $props();
 
   const dateFormatDefault = { year: "numeric", month: "long", day: "numeric" };
   const dateFormatOptions = $derived(dateFormat ?? dateFormatDefault);
@@ -183,8 +183,8 @@
 <div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
-      <input bind:this={inputElement} type="text" class={input({ color, class: inputClass })} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChange} onkeydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />
-      <button type="button" class={button()} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
+      <input bind:this={inputElement} type="text" class={cn(input({ color }), inputClass)} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChange} onkeydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />
+      <button type="button" class={cn(button(), btnClass)} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
         <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
           <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
         </svg>
@@ -193,7 +193,7 @@
   {/if}
 
   {#if isOpen || inline}
-    <div bind:this={calendarRef} id="datepicker-dropdown" class={base({ inline })} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
+    <div bind:this={calendarRef} id="datepicker-dropdown" class={cn(base({ inline }), className)} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
       {#if title}
         <h2 class={titleVariant()}>{title}</h2>
       {/if}
@@ -230,7 +230,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L495)
+[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L490)
 ## Props
 @prop value = $bindable()
 @prop defaultDate = null
@@ -252,4 +252,6 @@
 @prop onselect
 @prop onclear
 @prop onapply
+@prop btnClass
+@prop class: className
 -->

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DatepickerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L495)
+ * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L490)
  * ## Props
  * @prop value = $bindable()
  * @prop defaultDate = null
@@ -24,6 +24,8 @@ import { type DatepickerProps } from "..";
  * @prop onselect
  * @prop onclear
  * @prop onapply
+ * @prop btnClass
+ * @prop class: className
  */
 declare const Datepicker: import("svelte").Component<DatepickerProps, {}, "value" | "rangeFrom" | "rangeTo">;
 type Datepicker = ReturnType<typeof Datepicker>;

package/dist/datepicker/index.d.ts

@@ -1,3 +1,2 @@
-import Datepicker from "./Datepicker.svelte";
-import { datepicker } from "./theme";
-export { Datepicker, datepicker };
+export { default as Datepicker } from "./Datepicker.svelte";
+export { datepicker } from "./theme";

package/dist/datepicker/index.js

@@ -1,3 +1,2 @@
-import Datepicker from "./Datepicker.svelte";
-import { datepicker } from "./theme";
-export { Datepicker, datepicker };
+export { default as Datepicker } from "./Datepicker.svelte";
+export { datepicker } from "./theme";

package/dist/device-mockups/Android.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   import { android } from ".";
-  import type { AndroidProps } from "../types";
+  import { type AndroidProps, cn } from "..";
 
   let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
 
   const { div, slot, top, leftTop, leftMid, leftBot, right } = android();
 </script>
 
-<div {...restProps} class={div({ class: divClass })}>
-  <div class={top({ class: div2Class })}></div>
-  <div class={leftTop({ class: div3Class })}></div>
-  <div class={leftMid({ class: div4Class })}></div>
-  <div class={leftBot({ class: div5Class })}></div>
-  <div class={right({ class: div6Class })}></div>
-  <div class={slot({ class: div7Class })}>
+<div {...restProps} class={cn(div(), divClass)}>
+  <div class={cn(top(), div2Class)}></div>
+  <div class={cn(leftTop(), div3Class)}></div>
+  <div class={cn(leftMid(), div4Class)}></div>
+  <div class={cn(leftBot(), div5Class)}></div>
+  <div class={cn(right(), div6Class)}></div>
+  <div class={cn(slot(), div7Class)}>
     {#if children}
       {@render children()}
     {/if}
@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L532)
+[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L528)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Android.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { AndroidProps } from "../types";
+import { type AndroidProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L532)
+ * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L528)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/DefaultMockup.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
   import { defaultMockup } from ".";
-  import type { DefaultMockupProps } from "../types";
+  import { type DefaultMockupProps, cn } from "..";
 
   let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: DefaultMockupProps = $props();
 
   const { div, slot, top, leftTop, leftBot, right } = defaultMockup();
 </script>
 
-<div {...restProps} class={div({ class: divClass })}>
-  <div class={top({ class: div2Class })}></div>
-  <div class={leftTop({ class: div3Class })}></div>
-  <div class={leftBot({ class: div4Class })}></div>
-  <div class={right({ class: div5Class })}></div>
-  <div class={slot({ class: div6Class })}>
+<div {...restProps} class={cn(div(), divClass)}>
+  <div class={cn(top(), div2Class)}></div>
+  <div class={cn(leftTop(), div3Class)}></div>
+  <div class={cn(leftBot(), div4Class)}></div>
+  <div class={cn(right(), div5Class)}></div>
+  <div class={cn(slot(), div6Class)}>
     {#if children}
       {@render children()}
     {/if}
@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L543)
+[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L539)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/DefaultMockup.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { DefaultMockupProps } from "../types";
+import { type DefaultMockupProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L543)
+ * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L539)
  * ## Props
  * @prop children
  * @prop divClass