flowbite-svelte 1.9.0 → 1.10.0

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-  import { widgetPlaceholder } from "./index";
-  import { twMerge } from "tailwind-merge";
+  import { widgetPlaceholder, type WidgetPlaceholderTheme } from ".";
   import clsx from "clsx";
   import { type WidgetPlaceholderProps } from "..";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { class: className }: WidgetPlaceholderProps = $props();
+
+  const theme = getTheme("widgetPlaceholder");
+
   const { base, wrapper, vLine, hLine } = widgetPlaceholder({});
 </script>
 
-<div role="status" class={twMerge(base(), clsx(className))}>
+<div role="status" class={cn(base(), clsx(className), (theme as WidgetPlaceholderTheme)?.base)}>
   <div class={hLine({ class: "mb-2.5 h-2.5 w-32" })}></div>
   <div class={hLine({ class: "mb-10 h-2 w-48" })}></div>
   <div class={wrapper()}>
@@ -27,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1461)
+[WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1454)
 ## Props
 @prop class: className
 -->

package/dist/skeleton/WidgetPlaceholder.svelte.d.ts

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

package/dist/skeleton/index.d.ts

@@ -1,10 +1,9 @@
-import CardPlaceholder from "./CardPlaceholder.svelte";
-import ImagePlaceholder from "./ImagePlaceholder.svelte";
-import ListPlaceholder from "./ListPlaceholder.svelte";
-import Skeleton from "./Skeleton.svelte";
-import TestimonialPlaceholder from "./TestimonialPlaceholder.svelte";
-import TextPlaceholder from "./TextPlaceholder.svelte";
-import VideoPlaceholder from "./VideoPlaceholder.svelte";
-import WidgetPlaceholder from "./WidgetPlaceholder.svelte";
-import { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "./theme";
-export { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder, cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder };
+export { default as CardPlaceholder } from "./CardPlaceholder.svelte";
+export { default as ImagePlaceholder } from "./ImagePlaceholder.svelte";
+export { default as ListPlaceholder } from "./ListPlaceholder.svelte";
+export { default as Skeleton } from "./Skeleton.svelte";
+export { default as TestimonialPlaceholder } from "./TestimonialPlaceholder.svelte";
+export { default as TextPlaceholder } from "./TextPlaceholder.svelte";
+export { default as VideoPlaceholder } from "./VideoPlaceholder.svelte";
+export { default as WidgetPlaceholder } from "./WidgetPlaceholder.svelte";
+export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder, type CardPlaceholderTheme, type ImagePlaceholderTheme, type ListPlaceholderTheme, type SkeletonTheme, type TestimonialPlaceholderTheme, type TextPlaceholderTheme, type VideoPlaceholderTheme, type WidgetPlaceholderTheme } from "./theme";

package/dist/skeleton/index.js

@@ -1,10 +1,9 @@
-import CardPlaceholder from "./CardPlaceholder.svelte";
-import ImagePlaceholder from "./ImagePlaceholder.svelte";
-import ListPlaceholder from "./ListPlaceholder.svelte";
-import Skeleton from "./Skeleton.svelte";
-import TestimonialPlaceholder from "./TestimonialPlaceholder.svelte";
-import TextPlaceholder from "./TextPlaceholder.svelte";
-import VideoPlaceholder from "./VideoPlaceholder.svelte";
-import WidgetPlaceholder from "./WidgetPlaceholder.svelte";
-import { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "./theme";
-export { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder, cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder };
+export { default as CardPlaceholder } from "./CardPlaceholder.svelte";
+export { default as ImagePlaceholder } from "./ImagePlaceholder.svelte";
+export { default as ListPlaceholder } from "./ListPlaceholder.svelte";
+export { default as Skeleton } from "./Skeleton.svelte";
+export { default as TestimonialPlaceholder } from "./TestimonialPlaceholder.svelte";
+export { default as TextPlaceholder } from "./TextPlaceholder.svelte";
+export { default as VideoPlaceholder } from "./VideoPlaceholder.svelte";
+export { default as WidgetPlaceholder } from "./WidgetPlaceholder.svelte";
+export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "./theme";

package/dist/skeleton/theme.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
-type CardPlaceholderVariants = VariantProps<typeof cardPlaceholder>;
-declare const cardPlaceholder: import("tailwind-variants").TVReturnType<{
+export type CardPlaceholderVariants = VariantProps<typeof cardPlaceholder>;
+export declare const cardPlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             base: string;
@@ -73,8 +73,10 @@ declare const cardPlaceholder: import("tailwind-variants").TVReturnType<{
     line: string;
     footerArea: string;
 }, undefined, unknown, unknown, undefined>>;
-type ImagePlaceholderVariants = VariantProps<typeof imagePlaceholder>;
-declare const imagePlaceholder: import("tailwind-variants").TVReturnType<{
+export type CardPlaceholderSlots = keyof typeof cardPlaceholder.slots;
+export type CardPlaceholderTheme = Partial<Record<CardPlaceholderSlots, string>>;
+export type ImagePlaceholderVariants = VariantProps<typeof imagePlaceholder>;
+export declare const imagePlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             image: string;
@@ -204,8 +206,10 @@ declare const imagePlaceholder: import("tailwind-variants").TVReturnType<{
     content: string;
     line: string;
 }, undefined, unknown, unknown, undefined>>;
-type ListPlaceholderVariants = VariantProps<typeof listPlaceholder>;
-declare const listPlaceholder: import("tailwind-variants").TVReturnType<{
+export type ImagePlaceholderSlots = keyof typeof imagePlaceholder.slots;
+export type ImagePlaceholderTheme = Partial<Record<ImagePlaceholderSlots, string>>;
+export type ListPlaceholderVariants = VariantProps<typeof listPlaceholder>;
+export declare const listPlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             base: string;
@@ -326,8 +330,10 @@ declare const listPlaceholder: import("tailwind-variants").TVReturnType<{
     itemSubtitle: string;
     itemExtra: string;
 }, undefined, unknown, unknown, undefined>>;
-type SkeletonVariants = VariantProps<typeof skeleton>;
-declare const skeleton: import("tailwind-variants").TVReturnType<{
+export type ListPlaceholderSlots = keyof typeof listPlaceholder.slots;
+export type ListPlaceholderTheme = Partial<Record<ListPlaceholderSlots, string>>;
+export type SkeletonVariants = VariantProps<typeof skeleton>;
+export declare const skeleton: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             wrapper: string;
@@ -391,7 +397,9 @@ declare const skeleton: import("tailwind-variants").TVReturnType<{
     wrapper: string;
     line: string;
 }, undefined, unknown, unknown, undefined>>;
-declare const testimonialPlaceholder: import("tailwind-variants").TVReturnType<{
+export type SkeletonSlots = keyof typeof skeleton.slots;
+export type SkeletonTheme = Partial<Record<SkeletonSlots, string>>;
+export declare const testimonialPlaceholder: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             svg?: import("tailwind-variants").ClassValue;
@@ -440,8 +448,10 @@ declare const testimonialPlaceholder: import("tailwind-variants").TVReturnType<{
     svg: string;
     subContent: string;
 }, undefined, unknown, unknown, undefined>>;
-type TextPlaceholderVariants = VariantProps<typeof textPlaceholder>;
-declare const textPlaceholder: import("tailwind-variants").TVReturnType<{
+export type TestimonialPlaceholderSlots = keyof typeof testimonialPlaceholder.slots;
+export type TestimonialPlaceholderTheme = Partial<Record<TestimonialPlaceholderSlots, string>>;
+export type TextPlaceholderVariants = VariantProps<typeof textPlaceholder>;
+export declare const textPlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             baseWrapper: string;
@@ -511,8 +521,10 @@ declare const textPlaceholder: import("tailwind-variants").TVReturnType<{
     lineA: string;
     lineB: string;
 }, undefined, unknown, unknown, undefined>>;
-type VideoPlaceholderVariants = VariantProps<typeof videoPlaceholder>;
-declare const videoPlaceholder: import("tailwind-variants").TVReturnType<{
+export type TextPlaceholderSlots = keyof typeof textPlaceholder.slots;
+export type TextPlaceholderTheme = Partial<Record<TextPlaceholderSlots, string>>;
+export type VideoPlaceholderVariants = VariantProps<typeof videoPlaceholder>;
+export declare const videoPlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
         md: string;
@@ -537,7 +549,8 @@ declare const videoPlaceholder: import("tailwind-variants").TVReturnType<{
         "2xl": string;
     };
 }, undefined, "flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700", unknown, unknown, undefined>>;
-declare const widgetPlaceholder: import("tailwind-variants").TVReturnType<{
+export type VideoPlaceholderTheme = string;
+export declare const widgetPlaceholder: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
@@ -580,4 +593,5 @@ declare const widgetPlaceholder: import("tailwind-variants").TVReturnType<{
     hLine: string;
     vLine: string;
 }, undefined, unknown, unknown, undefined>>;
-export { cardPlaceholder, type CardPlaceholderVariants, imagePlaceholder, type ImagePlaceholderVariants, listPlaceholder, type ListPlaceholderVariants, skeleton, type SkeletonVariants, testimonialPlaceholder, textPlaceholder, type TextPlaceholderVariants, videoPlaceholder, type VideoPlaceholderVariants, widgetPlaceholder };
+export type WidgetPlaceholderSlots = keyof typeof widgetPlaceholder.slots;
+export type WidgetPlaceholderTheme = Partial<Record<WidgetPlaceholderSlots, string>>;

package/dist/skeleton/theme.js

@@ -1,5 +1,5 @@
 import { tv } from "tailwind-variants";
-const cardPlaceholder = tv({
+export const cardPlaceholder = tv({
     slots: {
         base: "p-4 rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700",
         imageArea: "mb-4 flex h-48 items-center justify-center rounded-sm bg-gray-300 dark:bg-gray-700",
@@ -17,7 +17,7 @@ const cardPlaceholder = tv({
         }
     }
 });
-const imagePlaceholder = tv({
+export const imagePlaceholder = tv({
     slots: {
         base: "space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center",
         image: "flex w-full items-center justify-center rounded-sm bg-gray-300 sm:w-96 dark:bg-gray-700",
@@ -64,7 +64,7 @@ const imagePlaceholder = tv({
         }
     }
 });
-const listPlaceholder = tv({
+export const listPlaceholder = tv({
     slots: {
         base: "p-4 space-y-4 max-w-md rounded-sm border border-gray-200 divide-y divide-gray-200 shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700",
         item: "flex items-center justify-between",
@@ -99,7 +99,7 @@ const listPlaceholder = tv({
     }
 });
 // Skeleton
-const skeleton = tv({
+export const skeleton = tv({
     slots: {
         wrapper: "animate-pulse",
         line: "rounded-full bg-gray-200 dark:bg-gray-700"
@@ -125,7 +125,7 @@ const skeleton = tv({
     }
 });
 // TestimonialPlaceholder
-const testimonialPlaceholder = tv({
+export const testimonialPlaceholder = tv({
     slots: {
         wrapper: "animate-pulse",
         line1: "rounded-full bg-gray-200 dark:bg-gray-700",
@@ -134,7 +134,7 @@ const testimonialPlaceholder = tv({
         subContent: "mt-4 flex items-center justify-center"
     }
 });
-const textPlaceholder = tv({
+export const textPlaceholder = tv({
     slots: {
         baseWrapper: "space-y-2.5 animate-pulse",
         divWrapper: "flex items-center space-x-2 rtl:space-x-reverse",
@@ -151,7 +151,7 @@ const textPlaceholder = tv({
         }
     }
 });
-const videoPlaceholder = tv({
+export const videoPlaceholder = tv({
     base: "flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700",
     variants: {
         size: {
@@ -164,7 +164,7 @@ const videoPlaceholder = tv({
     }
 });
 // WidgetPlaceholder
-const widgetPlaceholder = tv({
+export const widgetPlaceholder = tv({
     slots: {
         base: "p-4 max-w-sm rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700",
         wrapper: "mt-4 flex items-baseline space-x-6 rtl:space-x-reverse",
@@ -172,4 +172,3 @@ const widgetPlaceholder = tv({
         vLine: "w-full rounded-t-lg bg-gray-200 dark:bg-gray-700"
     }
 });
-export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder };

package/dist/speed-dial/SpeedDial.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
-  import Popper from "../utils/Popper.svelte";
+  import { Popper, cn } from "..";
   import { getSideAxis } from "@floating-ui/utils";
   import { setContext } from "svelte";
-  import { speed_dial } from "./theme";
+  import { speedDial, type SpeedDialTheme } from "./theme";
   import type { SpeedDialProps, SpeedCtxType } from "../types";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, popperClass, placement = "top", pill = true, tooltip = "left", trigger = "hover", textOutside = false, class: className, isOpen = $bindable(false), ...restProps }: SpeedDialProps = $props();
 
+  const theme = getTheme("speedDial");
+
   setContext<SpeedCtxType>("speed-dial", { pill, tooltip, textOutside });
 
   let vertical: boolean = $derived(getSideAxis(placement) === "y");
 
-  let { base, popper } = $derived(speed_dial({ vertical }));
+  let { base, popper } = $derived(speedDial({ vertical }));
 </script>
 
-<!-- class="bg-transparent" -->
-
-<Popper {...restProps} bind:isOpen {trigger} arrow={false} {placement} class={twMerge(base(), clsx(className))}>
-  <div class={twMerge(popper(), clsx(popperClass))}>
+<Popper {...restProps} bind:isOpen {trigger} arrow={false} {placement} class={cn(base(), clsx(className), (theme as SpeedDialTheme)?.base)}>
+  <div class={cn(popper(), clsx(popperClass), (theme as SpeedDialTheme)?.popper)}>
     {@render children()}
   </div>
 </Popper>
@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1493)
+[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1486)
 ## Props
 @prop children
 @prop popperClass

package/dist/speed-dial/SpeedDial.svelte.d.ts

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

package/dist/speed-dial/SpeedDialButton.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
-  import Button from "../buttons/Button.svelte";
-  import Tooltip from "../tooltip/Tooltip.svelte";
+  import { Button, Tooltip, cn } from "..";
   import { getContext } from "svelte";
-  import { speed_dial_button } from "./theme";
+  import { speedDialButton, type SpeedDialButtonTheme } from "./theme";
   import type { SpeedCtxType, SpeedDialButtonProps } from "../types";
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
 
   const context = getContext<SpeedCtxType>("speed-dial");
 
   let { children, name = "", color = "light", tooltip = context.tooltip, pill = context.pill, textOutside = context.textOutside, textClass, class: className, ...restProps }: SpeedDialButtonProps = $props();
 
-  let { base, span } = $derived(speed_dial_button({ textOutside, tooltip: tooltip == "none" }));
-  let spanClass = $derived(tooltip === "none" ? twMerge(span(), clsx(textClass)) : "sr-only");
+  const theme = getTheme("speedDialButton");
+
+  let { base, span } = $derived(speedDialButton({ textOutside, tooltip: tooltip == "none" }));
+  let spanClass = $derived(tooltip === "none" ? cn(span(), clsx(textClass), (theme as SpeedDialButtonTheme)?.span) : "sr-only");
 </script>
 
-<Button {pill} {color} {...restProps} class={twMerge(base(), clsx(className))}>
+<Button {pill} {color} {...restProps} class={cn(base(), clsx(className), (theme as SpeedDialButtonTheme)?.base)}>
   {@render children?.()}
   <span class={spanClass}>{name}</span>
 </Button>
@@ -28,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1507)
+[SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1500)
 ## Props
 @prop children
 @prop name = ""

package/dist/speed-dial/SpeedDialButton.svelte.d.ts

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

package/dist/speed-dial/SpeedDialTrigger.svelte

@@ -44,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1491)
+[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1484)
 ## Props
 @prop children
 @prop name = "Open actions menu"

package/dist/speed-dial/SpeedDialTrigger.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SpeedDialTriggerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1491)
+ * [SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1484)
  * ## Props
  * @prop children
  * @prop name = "Open actions menu"

package/dist/speed-dial/index.d.ts

@@ -1,5 +1,4 @@
-import SpeedDial from "./SpeedDial.svelte";
-import SpeedDialButton from "./SpeedDialButton.svelte";
-import SpeedDialTrigger from "./SpeedDialTrigger.svelte";
-import { speed_dial } from "./theme";
-export { SpeedDial, SpeedDialButton, SpeedDialTrigger, speed_dial };
+export { default as SpeedDial } from "./SpeedDial.svelte";
+export { default as SpeedDialButton } from "./SpeedDialButton.svelte";
+export { default as SpeedDialTrigger } from "./SpeedDialTrigger.svelte";
+export { speedDial, speedDialButton, type SpeedDialTheme, type SpeedDialButtonTheme } from "./theme";

package/dist/speed-dial/index.js

@@ -1,5 +1,4 @@
-import SpeedDial from "./SpeedDial.svelte";
-import SpeedDialButton from "./SpeedDialButton.svelte";
-import SpeedDialTrigger from "./SpeedDialTrigger.svelte";
-import { speed_dial } from "./theme";
-export { SpeedDial, SpeedDialButton, SpeedDialTrigger, speed_dial };
+export { default as SpeedDial } from "./SpeedDial.svelte";
+export { default as SpeedDialButton } from "./SpeedDialButton.svelte";
+export { default as SpeedDialTrigger } from "./SpeedDialTrigger.svelte";
+export { speedDial, speedDialButton } from "./theme";

package/dist/speed-dial/theme.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
-export type SpeedDialVariants = VariantProps<typeof speed_dial>;
-export declare const speed_dial: import("tailwind-variants").TVReturnType<{
+export type SpeedDialVariants = VariantProps<typeof speedDial>;
+export declare const speedDial: import("tailwind-variants").TVReturnType<{
     vertical: {
         true: {
             popper: string;
@@ -28,8 +28,10 @@ export declare const speed_dial: import("tailwind-variants").TVReturnType<{
     base: string;
     popper: string;
 }, undefined, unknown, unknown, undefined>>;
-export type SpeedDialButtonVariants = VariantProps<typeof speed_dial_button>;
-export declare const speed_dial_button: import("tailwind-variants").TVReturnType<{
+export type SpeedDialSlots = keyof typeof speedDial.slots;
+export type SpeedDialTheme = Partial<Record<SpeedDialSlots, string>>;
+export type SpeedDialButtonVariants = VariantProps<typeof speedDialButton>;
+export declare const speedDialButton: import("tailwind-variants").TVReturnType<{
     textOutside: {
         true: {
             base: string;
@@ -75,3 +77,5 @@ export declare const speed_dial_button: import("tailwind-variants").TVReturnType
     base: string;
     span: string;
 }, undefined, unknown, unknown, undefined>>;
+export type SpeedDialButtonSlots = keyof typeof speedDialButton.slots;
+export type SpeedDialButtonTheme = Partial<Record<SpeedDialButtonSlots, string>>;

package/dist/speed-dial/theme.js

@@ -1,6 +1,6 @@
 // Dial
 import { tv } from "tailwind-variants";
-export const speed_dial = tv({
+export const speedDial = tv({
     slots: {
         base: "group bg-transparent",
         popper: "flex items-center gap-2 bg-transparent text-inherit"
@@ -14,7 +14,7 @@ export const speed_dial = tv({
         vertical: false
     }
 });
-export const speed_dial_button = tv({
+export const speedDialButton = tv({
     slots: {
         base: "w-[52px] h-[52px] shadow-xs p-0",
         span: "block mb-px text-xs font-medium"

package/dist/spinner/Spinner.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { spinner } from ".";
   import type { SpinnerProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { color = "primary", size = "8", class: className, currentFill = "currentFill", currentColor = "currentColor", ...restProps }: SpinnerProps = $props();
 
+  const theme = getTheme("spinner");
+
   let spinnerClass = $derived(spinner({ color, size }));
 </script>
 
-<svg {...restProps} role="status" class={twMerge(spinnerClass, clsx(className))} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg {...restProps} role="status" class={cn(spinnerClass, clsx(className), theme)} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill={currentColor} />
   <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill={currentFill} />
 </svg>
@@ -18,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1516)
+[SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1509)
 ## Props
 @prop color = "primary"
 @prop size = "8"

package/dist/spinner/Spinner.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SpinnerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1516)
+ * [SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1509)
  * ## Props
  * @prop color = "primary"
  * @prop size = "8"

package/dist/spinner/index.d.ts

@@ -1,3 +1,2 @@
-import Spinner from "./Spinner.svelte";
-import { spinner } from "./theme";
-export { Spinner, spinner };
+export { default as Spinner } from "./Spinner.svelte";
+export { spinner, type SpinnerTheme } from "./theme";

package/dist/spinner/index.js

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

package/dist/spinner/theme.d.ts

@@ -97,3 +97,4 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         "16": string;
     };
 }, undefined, "inline-block animate-spin text-gray-300", unknown, unknown, undefined>>;
+export type SpinnerTheme = string;

package/dist/stepindicator/StepIndicator.svelte

@@ -1,70 +1,49 @@
 <script lang="ts">
-  import { twMerge, twJoin } from "tailwind-merge";
-  import clsx from "clsx";
-  import type { StepIndicatorProps } from "..";
+  import { type StepIndicatorProps, cn } from "..";
+  import { stepIndicator, getStepStateClasses, type StepIndicatorTheme } from ".";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"], currentStep = 1, size = "h-2.5", color = "primary", glow = false, hideLabel = false, completedCustom = "", currentCustom = "", class: className, ...restProps }: StepIndicatorProps = $props();
+  let { steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"], currentStep = 1, size = "md", color = "primary", glow = false, hideLabel = false, completedCustom = "", currentCustom = "", class: className, ...restProps }: StepIndicatorProps = $props();
 
-  type StepColorType = keyof typeof completedStepColors;
-  const safeColor = color as StepColorType;
+  const theme = getTheme("stepIndicator");
+
+  const style = stepIndicator({ size, color, glow, hideLabel });
 
-  const completedStepColors = {
-    primary: "bg-primary-500 dark:bg-primary-900",
-    secondary: "bg-secondary-500 dark:bg-secondary-900",
-    gray: "bg-gray-400 dark:bg-gray-500",
-    red: "bg-red-600 dark:bg-red-900",
-    yellow: "bg-yellow-400 dark:bg-yellow-600",
-    green: "bg-green-500 dark:bg-green-900",
-    indigo: "bg-indigo-500 dark:bg-indigo-900",
-    purple: "bg-purple-500 dark:bg-purple-900",
-    pink: "bg-pink-500 dark:bg-pink-900",
-    blue: "bg-blue-500 dark:bg-blue-900",
-    custom: completedCustom
-  };
-  const currentStepColors = {
-    primary: "bg-primary-800 dark:bg-primary-400",
-    secondary: "bg-secondary-800 dark:bg-secondary-400",
-    gray: "bg-gray-700 dark:bg-gray-200",
-    red: "bg-red-900 dark:bg-red-500",
-    yellow: "bg-yellow-600 dark:bg-yellow-400",
-    green: "bg-green-800 dark:bg-green-400",
-    indigo: "bg-indigo-800 dark:bg-indigo-400",
-    purple: "bg-purple-800 dark:bg-purple-400",
-    pink: "bg-pink-800 dark:bg-pink-400",
-    blue: "bg-blue-800 dark:bg-blue-400",
-    custom: currentCustom
-  };
   // Ensure currentStep is within bounds
   let safeCurrentStep = $derived(Math.max(1, Math.min(currentStep, steps.length)));
   let currentStepLabel = $derived(steps[safeCurrentStep - 1] ?? "Unknown Step");
 
-  // Type-safe way to access color values
-  function getCompletedColor(colorKey: StepColorType): string {
-    return completedStepColors[colorKey];
-  }
+  // Handle custom colors if provided
+  const getCustomStepClass = (stepIndex: number) => {
+    if (color !== "custom") return "";
 
-  function getCurrentColor(colorKey: StepColorType): string {
-    return currentStepColors[colorKey];
-  }
+    if (stepIndex === currentStep - 1) {
+      return currentCustom;
+    } else if (stepIndex < currentStep - 1) {
+      return completedCustom;
+    }
+    return "";
+  };
 </script>
 
-<div {...restProps} class={twMerge("space-y-2 dark:text-white", clsx(className))}>
+<div {...restProps} class={cn(style.base(), className, (theme as StepIndicatorTheme)?.base)}>
   {#if !hideLabel}
-    <h3 class="text-base font-semibold">{currentStepLabel}</h3>
+    <h3 class={cn(style.label(), (theme as StepIndicatorTheme)?.label)}>{currentStepLabel}</h3>
   {/if}
-  <div class={twJoin("flex w-full justify-between gap-2", size)}>
+
+  <div class={cn(style.container(), (theme as StepIndicatorTheme)?.container)}>
     {#each steps as step, i}
       {#if i === currentStep - 1}
-        <div class="relative h-full w-full">
-          <div class={twJoin("relative h-full w-full rounded-xs", getCurrentColor(safeColor))}></div>
+        <div class={cn(style.stepWrapper(), (theme as StepIndicatorTheme)?.stepWrapper)}>
+          <div class={cn(style.step(), getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step)} data-state="current"></div>
           {#if glow}
-            <div class={twJoin("absolute -inset-1 rounded-xs opacity-30 blur-sm dark:opacity-25", getCurrentColor(safeColor))}></div>
+            <div class={cn(style.stepGlow(), getCustomStepClass(i), (theme as StepIndicatorTheme)?.stepGlow)}></div>
           {/if}
         </div>
       {:else if i < currentStep - 1}
-        <div class={twJoin("h-full w-full rounded-xs", getCompletedColor(safeColor))}></div>
+        <div class={cn(style.step(), getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step)} data-state="completed"></div>
       {:else}
-        <div class="h-full w-full rounded-xs bg-gray-200 dark:bg-gray-700"></div>
+        <div class={cn(style.incompleteStep(), (theme as StepIndicatorTheme)?.incompleteStep)} data-state="incomplete"></div>
       {/if}
     {/each}
   </div>
@@ -74,11 +53,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1524)
+[StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1517)
 ## Props
 @prop steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"]
 @prop currentStep = 1
-@prop size = "h-2.5"
+@prop size = "md"
 @prop color = "primary"
 @prop glow = false
 @prop hideLabel = false