flowbite-svelte 1.4.3 → 1.5.0

package/dist/breadcrumb/Breadcrumb.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { breadcrumb } from "./index";
-  import type { BreadcrumbProps, BaseThemes } from "../types";
-  import clsx from "clsx";
+  import { breadcrumb } from ".";
+  import { type BreadcrumbProps, type BaseThemes, cn } from "..";
 
   let { children, solid = false, class: className, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
 
@@ -12,8 +11,8 @@
   const breadcrumbTheme = context?.breadcrumb || breadcrumb;
 
   const { nav, list } = breadcrumbTheme({ solid });
-  let classNav = $derived(nav({ class: clsx(className) }));
-  let classList = $derived(list({ class: olClass }));
+  let classNav = $derived(cn(nav(), className));
+  let classList = $derived(cn(list(), olClass));
 </script>
 
 <nav aria-label={ariaLabel} {...restProps} class={classNav}>
@@ -26,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L310)
+[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L315)
 ## Props
 @prop children
 @prop solid = false

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { breadcrumb } from "./index";
-  import type { BreadcrumbItemProps } from "../types";
-  import { twMerge } from "tailwind-merge";
+  import { type BreadcrumbItemProps, cn } from "..";
 
   let { children, icon, home = false, href, linkClass, spanClass, homeClass, class: className, ...restProps }: BreadcrumbItemProps = $props();
 
-  const { item, icon: breacrumbIcon } = breadcrumb({
-    home,
-    hasHref: !!href,
-    class: clsx(className)
-  });
+  const { item, icon: breacrumbIcon } = $derived(
+    breadcrumb({
+      home,
+      hasHref: !!href
+    })
+  );
 </script>
 
-<li {...restProps} class={item()}>
+<li {...restProps} class={cn(item(), className)}>
   {#if home}
-    <a class={item({ home: true, class: homeClass })} {href}>
+    <a class={cn(item({ home: true }), homeClass)} {href}>
       {#if icon}
         {@render icon()}
       {:else}
@@ -36,11 +35,11 @@
     {/if}
 
     {#if href}
-      <a class={twMerge(item({ home: false, hasHref: true }), linkClass)} {href}>
+      <a class={cn(item({ home: false, hasHref: true }), linkClass)} {href}>
         {@render children()}
       </a>
     {:else}
-      <span class={twMerge(item({ home: false, hasHref: false }), spanClass)}>
+      <span class={cn(item({ home: false, hasHref: false }), spanClass)}>
         {@render children()}
       </span>
     {/if}
@@ -51,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L317)
+[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L322)
 ## Props
 @prop children
 @prop icon

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

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

package/dist/breadcrumb/index.d.ts

@@ -1,4 +1,3 @@
-import Breadcrumb from "./Breadcrumb.svelte";
-import BreadcrumbItem from "./BreadcrumbItem.svelte";
-import { breadcrumb } from "./theme";
-export { Breadcrumb, BreadcrumbItem, breadcrumb };
+export { default as Breadcrumb } from "./Breadcrumb.svelte";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
+export { breadcrumb } from "./theme";

package/dist/breadcrumb/index.js

@@ -1,4 +1,3 @@
-import Breadcrumb from "./Breadcrumb.svelte";
-import BreadcrumbItem from "./BreadcrumbItem.svelte";
-import { breadcrumb } from "./theme";
-export { Breadcrumb, BreadcrumbItem, breadcrumb };
+export { default as Breadcrumb } from "./Breadcrumb.svelte";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
+export { breadcrumb } from "./theme";

package/dist/button-group/ButtonGroup.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { buttonGroup } from ".";
-  import type { ButtonGroupProps } from "..";
+  import { type ButtonGroupProps, cn } from "..";
 
   let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
 
-  let groupClass = $derived(buttonGroup({ size, className }));
+  let groupClass = $derived(cn(buttonGroup({ size }), className));
   setContext("group", size);
   setContext("disabled", disabled);
 </script>
@@ -18,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L328)
+[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L333)
 ## Props
 @prop children
 @prop size = "md"

package/dist/button-group/ButtonGroup.svelte.d.ts

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

package/dist/button-group/index.d.ts

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

package/dist/button-group/index.js

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

package/dist/buttons/Button.svelte

@@ -1,25 +1,22 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import type { SizeType, ButtonProps } from "..";
+  import { type SizeType, type ButtonProps, cn } from "..";
   import { button } from ".";
-  import clsx from "clsx";
-  import { twMerge } from "tailwind-merge";
 
   const group: SizeType = getContext("group");
   const ctxDisabled: boolean | undefined = getContext("disabled");
 
-  let { children, onclick, pill, outline = false, size = "md", color = "primary", shadow = false, tag = "button", disabled, class: className, ...restProps }: ButtonProps = $props();
-
+  let { children, pill, outline = false, size = "md", color, shadow = false, tag = "button", disabled, class: className, ...restProps }: ButtonProps = $props();
   let actualSize = $derived(group ? "sm" : size);
-  let actualColor = $derived(group ? (outline ? "dark" : "alternative") : color);
+  let actualColor = $derived(color ?? (group ? (outline ? "dark" : "alternative") : "primary"));
   let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled));
 
   const { base, outline: outline_, shadow: shadow_ } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
-  let btnCls = $derived(twMerge(base(), outline && outline_(), shadow && shadow_(), clsx(className)));
+  let btnCls = $derived(cn(base(), outline && outline_(), shadow && shadow_(), className));
 </script>
 
 {#if restProps.href === undefined}
-  <button type="button" {...restProps} class={btnCls} disabled={isDisabled} {onclick}>
+  <button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
     {@render children?.()}
   </button>
 {:else if restProps.href}
@@ -36,14 +33,13 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L343)
+[ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L347)
 ## Props
 @prop children
-@prop onclick
 @prop pill
 @prop outline = false
 @prop size = "md"
-@prop color = "primary"
+@prop color
 @prop shadow = false
 @prop tag = "button"
 @prop disabled

package/dist/buttons/Button.svelte.d.ts

@@ -1,15 +1,14 @@
-import type { ButtonProps } from "..";
+import { type ButtonProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L343)
+ * [ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L347)
  * ## Props
  * @prop children
- * @prop onclick
  * @prop pill
  * @prop outline = false
  * @prop size = "md"
- * @prop color = "primary"
+ * @prop color
  * @prop shadow = false
  * @prop tag = "button"
  * @prop disabled

package/dist/buttons/GradientButton.svelte

@@ -1,26 +1,23 @@
 <script lang="ts">
-  import Button from "./Button.svelte";
   import { getContext } from "svelte";
   import { gradientButton } from ".";
-  import type { GradientButtonProps } from "../types";
-  import type { SizeType } from "../types";
-  import clsx from "clsx";
+  import { type GradientButtonProps, type SizeType, Button, cn } from "..";
 
   const group: SizeType = getContext("group");
 
-  let { children, outline, pill, color = "blue", shadow, class: className, href, disabled, size, ...restProps }: GradientButtonProps = $props();
+  let { children, outline, pill, color = "blue", shadow, class: className, href, disabled, size, btnClass, ...restProps }: GradientButtonProps = $props();
 
   const { base, outlineWrapper } = $derived(gradientButton({ color, outline, pill, shadow, disabled, size, group: !!group }));
 </script>
 
 {#if outline}
-  <div class={base({ class: clsx(className) })}>
-    <Button {...restProps} class={outlineWrapper()} {disabled} {href} {size}>
+  <div class={cn(base(), className)}>
+    <Button {...restProps} class={cn(outlineWrapper(), btnClass)} {disabled} {href} {size}>
       {@render children?.()}
     </Button>
   </div>
 {:else}
-  <Button {...restProps} class={base({ class: clsx(className) })} {disabled} {href} {size}>
+  <Button {...restProps} class={cn(base(), className)} {disabled} {href} {size}>
     {@render children?.()}
   </Button>
 {/if}
@@ -29,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L352)
+[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L355)
 ## Props
 @prop children
 @prop outline
@@ -40,5 +37,6 @@
 @prop href
 @prop disabled
 @prop size
+@prop btnClass
 @prop ...restProps
 -->

package/dist/buttons/GradientButton.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { GradientButtonProps } from "../types";
+import { type GradientButtonProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L352)
+ * [GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L355)
  * ## Props
  * @prop children
  * @prop outline
@@ -13,6 +13,7 @@ import type { GradientButtonProps } from "../types";
  * @prop href
  * @prop disabled
  * @prop size
+ * @prop btnClass
  * @prop ...restProps
  */
 declare const GradientButton: import("svelte").Component<GradientButtonProps, {}, "">;

package/dist/buttons/index.d.ts

@@ -1,4 +1,3 @@
-import Button from "./Button.svelte";
-import GradientButton from "./GradientButton.svelte";
-import { button, gradientButton } from "./theme";
-export { Button, GradientButton, gradientButton, button };
+export { default as Button } from "./Button.svelte";
+export { default as GradientButton } from "./GradientButton.svelte";
+export { button, gradientButton } from "./theme";

package/dist/buttons/index.js

@@ -1,4 +1,3 @@
-import Button from "./Button.svelte";
-import GradientButton from "./GradientButton.svelte";
-import { button, gradientButton } from "./theme";
-export { Button, GradientButton, gradientButton, button };
+export { default as Button } from "./Button.svelte";
+export { default as GradientButton } from "./GradientButton.svelte";
+export { button, gradientButton } from "./theme";

package/dist/card/Card.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+  import type { CardProps } from "..";
+  import clsx from "clsx";
   import { card } from ".";
-  import type { CardProps } from "../types";
-  import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
 
-  let { children, href, color = "gray", horizontal = false, shadow = "md", reverse = false, img, size = "sm", class: className, imgClass, contentClass, ...restProps }: CardProps = $props();
+  let { children, color = "gray", horizontal = false, shadow = "md", reverse = false, img, size = "sm", class: className, imgClass, contentClass, ...restProps }: CardProps = $props();
 
   const { base, image } = $derived(
     card({
@@ -12,53 +12,37 @@
       shadow,
       horizontal,
       reverse,
-      href: !!href
+      href: !!restProps.href
     })
   );
-
-  /* eslint-disable  @typescript-eslint/no-explicit-any */
-  const commonProps: Record<string, any> = $derived({
-    class: base({ class: className }),
-    ...restProps
-  });
-
-  const anchorProps: HTMLAnchorAttributes = $derived({
-    ...commonProps,
-    href
-  });
-
-  const divProps: HTMLAttributes<HTMLDivElement> = $derived({
-    ...commonProps
-  });
 </script>
 
 {#snippet childSlot()}
   {#if img}
-    <img class={image({ class: imgClass })} src={img} alt={img} />
+    <img class={image({ class: clsx(imgClass) })} src={img} alt={img} />
     {@render children()}
   {:else}
     {@render children()}
   {/if}
 {/snippet}
 
-{#if href}
-  <a {...anchorProps}>
+{#if restProps.href === undefined}
+  <div {...restProps} class={base({ class: clsx(className) })}>
     {@render childSlot()}
-  </a>
+  </div>
 {:else}
-  <div {...divProps}>
+  <a {...restProps} class={base({ class: clsx(className) })}>
     {@render childSlot()}
-  </div>
+  </a>
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L416)
+[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L396)
 ## Props
 @prop children
-@prop href
 @prop color = "gray"
 @prop horizontal = false
 @prop shadow = "md"

package/dist/card/Card.svelte.d.ts

@@ -1,11 +1,10 @@
-import type { CardProps } from "../types";
+import type { CardProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L416)
+ * [CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L396)
  * ## Props
  * @prop children
- * @prop href
  * @prop color = "gray"
  * @prop horizontal = false
  * @prop shadow = "md"

package/dist/card/index.d.ts

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

package/dist/card/index.js

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

package/dist/card/theme.d.ts

@@ -1,3 +1,5 @@
+import { type VariantProps } from "tailwind-variants";
+export type CardVariants = VariantProps<typeof card>;
 export declare const card: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {

package/dist/carousel/Carousel.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-  import clsx from "clsx";
-  import { twMerge } from "tailwind-merge";
   import { onMount, setContext } from "svelte";
   import { writable } from "svelte/store";
   import { canChangeSlide } from "./CarouselSlide";
-  import Slide from "./Slide.svelte";
   import { carousel } from "./theme";
-  import type { CarouselProps, State } from "../types";
+  import { type CarouselProps, type State, Slide, cn } from "..";
 
-  const SLIDE_DURATION_RATIO = 0.25; // TODO: Expose one day?
+  const SLIDE_DURATION_RATIO = 0.25;
 
   let { children, slide, images, index = $bindable(0), slideDuration = 1000, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className, onchange, divClass, ...restProps }: CarouselProps = $props();
 
@@ -53,8 +50,6 @@
   };
 
   const loop = (node: HTMLElement, duration: number) => {
-    // carouselDiv = node; // used by DragStart
-
     // loop timer
     /* eslint-disable  @typescript-eslint/no-explicit-any */
     let intervalId: any;
@@ -171,12 +166,12 @@
 
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
 <svelte:document onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} />
-<div bind:this={carouselDiv} class={twMerge("relative", divClass)} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
-  <div {...restProps} class={carousel({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", className) })} use:loop={duration}>
+<div bind:this={carouselDiv} class={cn("relative", divClass)} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
+  <div {...restProps} class={cn(carousel(), activeDragGesture === undefined ? "transition-transform" : "", className)} use:loop={duration}>
     {#if slide}
       {@render slide({ index, Slide })}
     {:else}
-      <Slide image={images[index]} class={imgClass} {transition} />
+      <Slide image={images[index]} class={cn(imgClass)} {transition} />
     {/if}
   </div>
   {@render children?.(index)}
@@ -186,7 +181,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L428)
+[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L414)
 ## Props
 @prop children
 @prop slide

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

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

package/dist/carousel/ControlButton.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { controlButton } from "./theme";
-  import type { ControlButtonProps } from "../types";
+  import { type ControlButtonProps, cn } from "..";
 
-  let { children, forward, name, class: className, ...restProps }: ControlButtonProps = $props();
+  let { children, forward, name, class: className, spanClass, ...restProps }: ControlButtonProps = $props();
 </script>
 
-<button type="button" class={controlButton({ forward, class: clsx(className) })} {...restProps}>
+<button type="button" class={cn(controlButton({ forward }), className)} {...restProps}>
   {#if children}
     {@render children()}
   {:else}
-    <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-hidden sm:h-10 sm:w-10 dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70">
+    <span class={cn("inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-hidden sm:h-10 sm:w-10 dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70", spanClass)}>
       {#if forward}
         <svg aria-hidden="true" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
@@ -31,11 +30,12 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
+[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L435)
 ## Props
 @prop children
 @prop forward
 @prop name
 @prop class: className
+@prop spanClass
 @prop ...restProps
 -->

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

@@ -1,13 +1,14 @@
-import type { ControlButtonProps } from "../types";
+import { type ControlButtonProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
+ * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L435)
  * ## Props
  * @prop children
  * @prop forward
  * @prop name
  * @prop class: className
+ * @prop spanClass
  * @prop ...restProps
  */
 declare const ControlButton: import("svelte").Component<ControlButtonProps, {}, "">;

package/dist/carousel/Controls.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { getContext, type Snippet } from "svelte";
+  import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
   import { canChangeSlide } from "./CarouselSlide";
-  import ControlButton from "./ControlButton.svelte";
-  import type { State, ControlsProps } from "../types";
+  import { type State, type ControlsProps, ControlButton, cn } from "..";
 
   let { children, class: className, ...restProps }: ControlsProps = $props();
 
@@ -43,15 +42,15 @@
 {#if children}
   {@render children(changeSlide)}
 {:else}
-  <ControlButton name="Previous" forward={false} onclick={() => changeSlide(false)} class={className} {...restProps} />
-  <ControlButton name="Next" forward={true} onclick={() => changeSlide(true)} class={className} {...restProps} />
+  <ControlButton name="Previous" forward={false} onclick={() => changeSlide(false)} class={cn(className)} {...restProps} />
+  <ControlButton name="Next" forward={true} onclick={() => changeSlide(true)} class={cn(className)} {...restProps} />
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L454)
+[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
 ## Props
 @prop children
 @prop class: className

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

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