flowbite-svelte 1.9.0 → 1.10.0

package/dist/carousel/Carousel.svelte

@@ -4,11 +4,14 @@
   import { canChangeSlide } from "./CarouselSlide";
   import { carousel } from "./theme";
   import { type CarouselProps, type State, Slide, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   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();
 
+  const theme = getTheme("carousel");
+
   const { set, subscribe, update } = writable<State>({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: new Date() });
 
   setContext("state", {
@@ -166,7 +169,7 @@
 <!-- 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={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)} {@attach loop}>
+  <div {...restProps} class={cn(carousel(), activeDragGesture === undefined ? "transition-transform" : "", className, theme)} {@attach loop}>
     {#if slide}
       {@render slide({ index, Slide })}
     {:else}
@@ -180,7 +183,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L412)
+[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L405)
 ## Props
 @prop children
 @prop slide

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

@@ -2,7 +2,7 @@ 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#L412)
+ * [CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L405)
  * ## Props
  * @prop children
  * @prop slide

package/dist/carousel/{Indicators.svelte → CarouselIndicators.svelte}

@@ -1,13 +1,16 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
-  import { indicators } from "./theme";
+  import { carouselIndicators, type CarouselIndicatorsTheme } from "./theme";
   import { Indicator, type IndicatorsProps, type State, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
 
+  const theme = getTheme("indicators");
+
   const state = getContext<Writable<State>>("state");
-  const { base, indicator } = $derived(indicators({ position }));
+  const { base, indicator } = $derived(carouselIndicators({ position }));
 
   function goToIndex(newIndex: number) {
     state.update((_state) => {
@@ -23,14 +26,14 @@
   }
 </script>
 
-<div class={cn(base(), className)} {...restProps}>
+<div class={cn(base(), className, (theme as CarouselIndicatorsTheme)?.base)} {...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={cn(indicator({ selected }), selected ? activeClass : inactiveClass)} />
+        <Indicator class={cn(indicator({ selected }), selected ? activeClass : inactiveClass, (theme as CarouselIndicatorsTheme)?.indicator)} />
       {/if}
     </button>
   {/each}
@@ -40,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L426)
+[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L419)
 ## Props
 @prop children
 @prop activeClass

package/dist/carousel/{Indicators.svelte.d.ts → CarouselIndicators.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#L426)
+ * [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L419)
  * ## Props
  * @prop children
  * @prop activeClass
@@ -11,6 +11,6 @@ import { type IndicatorsProps } from "..";
  * @prop class: className
  * @prop ...restProps
  */
-declare const Indicators: import("svelte").Component<IndicatorsProps, {}, "">;
-type Indicators = ReturnType<typeof Indicators>;
-export default Indicators;
+declare const CarouselIndicators: import("svelte").Component<IndicatorsProps, {}, "">;
+type CarouselIndicators = ReturnType<typeof CarouselIndicators>;
+export default CarouselIndicators;

package/dist/carousel/ControlButton.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { controlButton } from "./theme";
   import { type ControlButtonProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, forward, name, class: className, spanClass, ...restProps }: ControlButtonProps = $props();
+
+  const theme = getTheme("carouselButton");
 </script>
 
-<button type="button" class={cn(controlButton({ forward }), className)} {...restProps}>
+<button type="button" class={cn(controlButton({ forward }), className, theme)} {...restProps}>
   {#if children}
     {@render children()}
   {:else}
@@ -30,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L433)
+[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L426)
 ## Props
 @prop children
 @prop forward

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

@@ -2,7 +2,7 @@ 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#L433)
+ * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L426)
  * ## Props
  * @prop children
  * @prop forward

package/dist/carousel/Controls.svelte

@@ -3,9 +3,12 @@
   import type { Writable } from "svelte/store";
   import { canChangeSlide } from "./CarouselSlide";
   import { type State, type ControlsProps, ControlButton, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: ControlsProps = $props();
 
+  const theme = getTheme("controls");
+
   const state = getContext<Writable<State>>("state");
   const { update } = state;
 
@@ -42,15 +45,15 @@
 {#if children}
   {@render children(changeSlide)}
 {:else}
-  <ControlButton name="Previous" forward={false} onclick={() => changeSlide(false)} class={cn(className)} {...restProps} />
-  <ControlButton name="Next" forward={true} onclick={() => changeSlide(true)} class={cn(className)} {...restProps} />
+  <ControlButton name="Previous" forward={false} onclick={() => changeSlide(false)} class={cn(className, theme)} {...restProps} />
+  <ControlButton name="Next" forward={true} onclick={() => changeSlide(true)} class={cn(className, theme)} {...restProps} />
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L439)
+[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
 ## Props
 @prop children
 @prop class: className

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

@@ -2,7 +2,7 @@ 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#L439)
+ * [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/carousel/Slide.svelte

@@ -4,11 +4,14 @@
   import { fly } from "svelte/transition";
   import { slide } from "./theme";
   import { type SlideProps, type State, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   const state = getContext<Writable<State>>("state");
 
   let { image, transition, class: className, ...restProps }: SlideProps = $props();
 
+  const theme = getTheme("slide");
+
   let transitionSlideIn = $derived({
     x: $state.forward ? "100%" : "-100%",
     opacity: 1,
@@ -25,7 +28,7 @@
     duration: $state.slideDuration
   });
 
-  let imgClass = cn(slide(), className);
+  let imgClass = cn(slide(), className, theme);
 </script>
 
 {#if transition}
@@ -42,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L456)
+[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
 ## Props
 @prop image
 @prop transition

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

@@ -2,7 +2,7 @@ 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#L456)
+ * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
  * ## Props
  * @prop image
  * @prop transition

package/dist/carousel/Thumbnail.svelte

@@ -2,17 +2,20 @@
   import { thumbnail } from "./theme";
   import { type ThumbnailProps, cn } from "..";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
 
   let { selected, class: className, ...restProps }: ThumbnailProps = $props();
+
+  const theme = getTheme("thumbnail");
 </script>
 
-<img {...restProps} class={thumbnail({ selected, class: clsx(className) })} />
+<img {...restProps} class={cn(thumbnail({ selected, class: clsx(className) }), theme)} />
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L443)
+[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L436)
 ## Props
 @prop selected
 @prop class: className

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

@@ -2,7 +2,7 @@ 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#L443)
+ * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L436)
  * ## Props
  * @prop selected
  * @prop class: className

package/dist/carousel/Thumbnails.svelte

@@ -4,9 +4,12 @@
   import { thumbnails } from "./theme";
   import { type ThumbnailsProps, type State, Thumbnail, cn } from "..";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: ThumbnailsProps = $props();
 
+  const theme = getTheme("thumbnails");
+
   const state = getContext<Writable<State>>("state");
   if (!state) {
     console.error("State is undefined. Make sure to provide state context or pass it as a prop.");
@@ -47,7 +50,7 @@
   });
 </script>
 
-<div class={cn(thumbnails(), className)}>
+<div class={cn(thumbnails(), className, theme)}>
   {#each images as image, idx}
     {@const selected = index === idx}
     <button onclick={() => btnClick(idx)} aria-label={ariaLabel}>
@@ -64,7 +67,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L447)
+[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
 ## Props
 @prop children
 @prop images = []

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

@@ -2,7 +2,7 @@ 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#L447)
+ * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
  * ## Props
  * @prop children
  * @prop images = []

package/dist/carousel/index.d.ts

@@ -1,8 +1,8 @@
 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 CarouselIndicators } from "./CarouselIndicators.svelte";
+export { carousel, type CarouselTheme, carouselIndicators, type CarouselIndicatorsTheme, controlButton, type ControlButtonTheme, thumbnails, type ThumbnailsTheme, thumbnail, type ThumbnailTheme, slide, type SlideTheme } 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,8 +1,8 @@
 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 CarouselIndicators } from "./CarouselIndicators.svelte";
+export { carousel, carouselIndicators, controlButton, thumbnails, thumbnail, slide } 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/theme.d.ts

@@ -1,7 +1,8 @@
 import { type VariantProps } from "tailwind-variants";
 export type CarouselVariants = VariantProps<typeof carousel>;
 export declare const carousel: import("tailwind-variants").TVReturnType<{}, undefined, "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96", unknown, unknown, undefined>>;
-export declare const indicators: import("tailwind-variants").TVReturnType<{
+export type CarouselTheme = string;
+export declare const carouselIndicators: import("tailwind-variants").TVReturnType<{
     selected: {
         true: {
             indicator: string;
@@ -71,6 +72,8 @@ export declare const indicators: import("tailwind-variants").TVReturnType<{
     base: string;
     indicator: string;
 }, undefined, unknown, unknown, undefined>>;
+export type CarouselIndicatorsSlots = keyof typeof carouselIndicators.slots;
+export type CarouselIndicatorsTheme = Partial<Record<CarouselIndicatorsSlots, string>>;
 export declare const controlButton: import("tailwind-variants").TVReturnType<{
     forward: {
         true: string;
@@ -87,7 +90,9 @@ export declare const controlButton: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-hidden text-white dark:text-gray-300", unknown, unknown, undefined>>;
+export type ControlButtonTheme = string;
 export declare const thumbnails: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-row justify-center bg-gray-100 w-full", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-row justify-center bg-gray-100 w-full", unknown, unknown, undefined>>;
+export type ThumbnailsTheme = string;
 export declare const thumbnail: import("tailwind-variants").TVReturnType<{
     selected: {
         true: string;
@@ -104,4 +109,6 @@ export declare const thumbnail: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
+export type ThumbnailTheme = string;
 export declare const slide: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "absolute block w-full! h-full object-cover", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "absolute block w-full! h-full object-cover", unknown, unknown, undefined>>;
+export type SlideTheme = string;

package/dist/carousel/theme.js

@@ -1,4 +1,3 @@
-import { select } from "../forms/select";
 import { tv } from "tailwind-variants";
 export const carousel = tv({
     base: "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96",
@@ -6,7 +5,7 @@ export const carousel = tv({
     compoundVariants: [],
     defaultVariants: {}
 });
-export const indicators = tv({
+export const carouselIndicators = tv({
     slots: {
         base: "absolute start-1/2 z-30 flex -translate-x-1/2 space-x-3 rtl:translate-x-1/2 rtl:space-x-reverse",
         indicator: "bg-gray-100 hover:bg-gray-300"

package/dist/clipboard/Clipboard.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import Button from "../buttons/Button.svelte";
   import clsx from "clsx";
-  import type { ClipboardProps } from "..";
+  import { type ClipboardProps, cn } from "..";
   import { clipboard } from "./theme";
   import type { MouseEventHandler } from "svelte/elements";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, embedded = false, value = $bindable(""), success = $bindable(false), onclick, class: className = "", ...restProps }: ClipboardProps = $props();
 
+  const theme = getTheme("clipboard");
+
   const copyToClipboard: MouseEventHandler<HTMLButtonElement> = async (ev) => {
     onclick?.(ev);
     if (ev.defaultPrevented) return;
@@ -35,7 +38,7 @@
   };
 </script>
 
-<Button onclick={copyToClipboard} {...restProps} class={clipboard({ embedded, class: clsx(className) })}>
+<Button onclick={copyToClipboard} {...restProps} class={cn(clipboard({ embedded, class: clsx(className) }), theme)}>
   {@render children?.(success)}
 </Button>
 
@@ -43,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L468)
+[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L461)
 ## Props
 @prop children
 @prop embedded = false

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

@@ -1,8 +1,8 @@
-import type { ClipboardProps } from "..";
+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#L468)
+ * [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L461)
  * ## Props
  * @prop children
  * @prop embedded = false

package/dist/clipboard/index.d.ts

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

package/dist/clipboard/theme.d.ts

@@ -16,3 +16,4 @@ export declare const clipboard: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "gap-2", unknown, unknown, undefined>>;
+export type ClipboardTheme = string;

package/dist/darkmode/DarkMode.svelte

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

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

@@ -2,7 +2,7 @@ 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#L477)
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
  * ## Props
  * @prop class: className
  * @prop lightIcon

package/dist/darkmode/index.d.ts

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

package/dist/darkmode/theme.d.ts

@@ -1 +1,2 @@
 export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5", unknown, unknown, undefined>>;
+export type DarkModeTheme = string;

package/dist/datepicker/Datepicker.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { fade } from "svelte/transition";
   import { Button, ToolbarButton, type DatepickerProps, cn } from "..";
-  import { datepicker } from "./theme";
+  import { datepicker, type DatepickerTheme } from "./theme";
   import { parse, isValid, addDays, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isWithinInterval } from "date-fns";
+  import { getTheme } from "../theme/themeUtils";
 
   let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), availableFrom = null, availableTo = null, locale = "default", translationLocale = locale, firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, monthColor = "alternative", monthBtnSelected = "bg-primary-500 text-white", monthBtn = "text-gray-700 dark:text-gray-300", class: className, elementRef = $bindable() }: DatepickerProps = $props();
 
+  const theme = getTheme("datepicker");
+
   const dateFormatDefault = { year: "numeric", month: "long", day: "numeric" };
 
   // Internal state
@@ -272,8 +274,8 @@
 <div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
-      <input bind:this={inputElement} type="text" class={cn(input({ color }), inputClass)} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChangeWithDateFns} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
-      <button type="button" class={cn(button({ class: clsx(classes?.button) }), btnClass)} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
+      <input bind:this={inputElement} type="text" class={cn(input({ color }), inputClass, (theme as DatepickerTheme)?.input)} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChangeWithDateFns} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
+      <button type="button" class={cn(button({ class: clsx(classes?.button) }), btnClass, (theme as DatepickerTheme)?.button)} 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>
@@ -282,23 +284,23 @@
   {/if}
 
   {#if isOpen || inline}
-    <div bind:this={calendarRef} id="datepicker-dropdown" class={cn(base({ inline, class: clsx(classes?.base) }), className)} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
+    <div bind:this={calendarRef} id="datepicker-dropdown" class={cn(base({ inline, class: clsx(classes?.base) }), className, (theme as DatepickerTheme)?.base)} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
       {#if title}
-        <h2 class={titleVariant({ class: clsx(classes?.titleVariant) })}>{title}</h2>
+        <h2 class={cn(titleVariant({ class: clsx(classes?.titleVariant) }), (theme as DatepickerTheme)?.titleVariant)}>{title}</h2>
       {/if}
 
       {#if showMonthSelector}
         <!-- Month/Year Selector View -->
-        <div class={nav({ class: clsx(classes?.nav) })}>
+        <div class={cn(nav({ class: clsx(classes?.nav) }), (theme as DatepickerTheme)?.nav)}>
           {@render yearNavButton(false)}
-          <h3 class={polite({ class: clsx(classes?.polite) })} aria-live="polite">
+          <h3 class={cn(polite({ class: clsx(classes?.polite) }), (theme as DatepickerTheme)?.polite)} aria-live="polite">
             {currentMonth.getFullYear()}
           </h3>
           {@render yearNavButton(true)}
         </div>
         <div class="grid grid-cols-4 gap-2 p-4">
           {#each monthNames as month, index}
-            <Button type="button" color={monthColor} class={twMerge(monthButton(), currentMonth.getMonth() === index ? clsx(monthBtnSelected) : clsx(monthBtn), clsx(classes?.monthButton))} onclick={(event: MouseEvent) => selectMonth(index, event)}>
+            <Button type="button" color={monthColor} class={cn(monthButton(), currentMonth.getMonth() === index ? clsx(monthBtnSelected) : clsx(monthBtn), clsx(classes?.monthButton), (theme as DatepickerTheme)?.monthButton)} onclick={(event: MouseEvent) => selectMonth(index, event)}>
               {month}
             </Button>
           {/each}
@@ -313,9 +315,9 @@
           </Button>
           {@render navButton(true)}
         </div>
-        <div class={grid({ class: clsx(classes?.grid) })} role="grid">
+        <div class={cn(grid({ class: clsx(classes?.grid) }), (theme as DatepickerTheme)?.grid)} role="grid">
           {#each weekdays as day}
-            <div class={columnHeader({ class: clsx(classes?.columnHeader) })} role="columnheader">{day}</div>
+            <div class={cn(columnHeader({ class: clsx(classes?.columnHeader) }), (theme as DatepickerTheme)?.columnHeader)} role="columnheader">{day}</div>
           {/each}
           {#each daysInMonth as day}
             {@const current = day.getMonth() !== currentMonth.getMonth()}
@@ -323,13 +325,16 @@
             <Button
               type="button"
               color={isSelected(day) ? color : "alternative"}
-              class={dayButton({
-                current,
-                today: isToday(day),
-                color: isInRange(day) ? color : undefined,
-                unavailable: !available,
-                class: clsx(classes?.dayButton, !available && "cursor-not-allowed opacity-50")
-              })}
+              class={cn(
+                dayButton({
+                  current,
+                  today: isToday(day),
+                  color: isInRange(day) ? color : undefined,
+                  unavailable: !available,
+                  class: clsx(classes?.dayButton, !available && "cursor-not-allowed opacity-50")
+                }),
+                (theme as DatepickerTheme)?.dayButton
+              )}
               onclick={() => handleDaySelect(day)}
               onkeydown={handleCalendarKeydown}
               aria-label={day.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
@@ -345,7 +350,7 @@
       {/if}
 
       {#if showActionButtons && !showMonthSelector}
-        <div class={actionButtons({ class: clsx(classes?.actionButtons) })}>
+        <div class={cn(actionButtons({ class: clsx(classes?.actionButtons) }), (theme as DatepickerTheme)?.actionButtons)}>
           <Button onclick={() => handleDaySelect(new Date())} {color} size="sm" disabled={!isDateAvailable(new Date())}>Today</Button>
           <Button onclick={handleClear} color="red" size="sm">Clear</Button>
           <Button onclick={handleApply} {color} size="sm">Apply</Button>
@@ -359,7 +364,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
+[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
 ## Props
 @prop value = $bindable()
 @prop defaultDate = null

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#L487)
+ * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
  * ## Props
  * @prop value = $bindable()
  * @prop defaultDate = null
@@ -36,6 +36,6 @@ import { type DatepickerProps } from "..";
  * @prop class: className
  * @prop elementRef = $bindable()
  */
-declare const Datepicker: import("svelte").Component<DatepickerProps, {}, "value" | "elementRef" | "rangeFrom" | "rangeTo">;
+declare const Datepicker: import("svelte").Component<DatepickerProps, {}, "value" | "rangeFrom" | "rangeTo" | "elementRef">;
 type Datepicker = ReturnType<typeof Datepicker>;
 export default Datepicker;

package/dist/datepicker/index.d.ts

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