flowbite-svelte 1.11.6 → 1.11.8

package/dist/carousel/Carousel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type CarouselProps, type State, Slide } from "..";
+  import { type CarouselProps, type CarouselState, Slide } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { onMount, setContext } from "svelte";
@@ -24,17 +24,17 @@
 
     if (n % images.length === _state.index) return;
 
-    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return;
+    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration: _state.slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return;
 
     _state.forward = n >= _state.index;
     _state.index = (images.length + n) % images.length;
-    _state.lastSlideChange = new Date();
+    _state.lastSlideChange = Date.now();
 
     index = _state.index; // Update the bindable index
     onchange?.(images[_state.index]);
   };
 
-  const _state: State = $state({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: new Date(), changeSlide });
+  const _state: CarouselState = $state({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: Date.now(), changeSlide });
 
   setContext("state", _state);
 
@@ -44,18 +44,17 @@
     changeSlide(index);
   });
 
+  $effect(() => {
+    _state.slideDuration = slideDuration;
+  });
+
   onMount(() => {
     onchange?.(images[index]);
     initialized = true;
   });
 
-  const nextSlide = () => {
-    changeSlide(_state.index + 1);
-  };
-
-  const prevSlide = () => {
-    changeSlide(_state.index - 1);
-  };
+  const nextSlide = () => changeSlide(_state.index + 1);
+  const prevSlide = () => changeSlide(_state.index - 1);
 
   const loop = (node: HTMLElement) => {
     // loop timer

package/dist/carousel/CarouselIndicators.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Indicator, type IndicatorsProps, type State } from "..";
+  import { Indicator, type IndicatorsProps, type CarouselState } from "..";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
   import { getContext } from "svelte";
@@ -9,7 +9,7 @@
 
   const theme = getTheme("carouselIndicators");
 
-  const _state = getContext<State>("state");
+  const _state = getContext<CarouselState>("state");
   const { base, indicator } = $derived(carouselIndicators({ position }));
 
   function goToIndex(newIndex: number) {

package/dist/carousel/CarouselSlide.d.ts

@@ -1,5 +1,5 @@
 export declare const canChangeSlide: ({ lastSlideChange, slideDuration, slideDurationRatio }: {
-    lastSlideChange: Date;
+    lastSlideChange: number;
     slideDuration: number;
     slideDurationRatio?: number;
 }) => boolean;

package/dist/carousel/CarouselSlide.js

@@ -1,5 +1,5 @@
 export const canChangeSlide = ({ lastSlideChange, slideDuration, slideDurationRatio = 1 }) => {
-    if (lastSlideChange && new Date().getTime() - lastSlideChange.getTime() < slideDuration * slideDurationRatio) {
+    if (lastSlideChange && Date.now() - lastSlideChange < slideDuration * slideDurationRatio) {
         console.warn("Can't change slide yet, too soon");
         return false;
     }

package/dist/carousel/Controls.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type ControlsProps, type State, ControlButton } from "..";
+  import { type ControlsProps, type CarouselState, ControlButton } from "..";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
   import { getContext } from "svelte";
@@ -8,7 +8,7 @@
 
   const theme = getTheme("controlButton");
 
-  const _state = getContext<State>("state");
+  const _state = getContext<CarouselState>("state");
 
   function changeSlide(forward: boolean) {
     _state.changeSlide(forward ? _state.index + 1 : _state.index - 1);

package/dist/carousel/Slide.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { type SlideProps, type State } from "..";
+  import { type SlideProps, type CarouselState } from "..";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
   import { getContext } from "svelte";
   import { fly } from "svelte/transition";
   import { slide } from "./theme";
 
-  const _state = getContext<State>("state");
+  const _state = getContext<CarouselState>("state");
 
   let { image, transition, fit, class: className, ...restProps }: SlideProps = $props();
 
@@ -28,7 +28,7 @@
     duration: _state.slideDuration
   });
 
-  let imgClass = slide({ fit, class: clsx(theme, className) });
+  let imgClass = $derived(slide({ fit, class: clsx(theme, className) }));
 </script>
 
 {#if transition}

package/dist/navbar/NavBrand.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { NavBrandProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
@@ -8,6 +7,6 @@ import type { NavBrandProps } from "../types";
  * @prop class: className
  * @prop ...restProps
  */
-declare const NavBrand: import("svelte").Component<NavBrandProps, {}, "">;
+declare const NavBrand: import("svelte").Component<import("svelte/elements").HTMLAnchorAttributes, {}, "">;
 type NavBrand = ReturnType<typeof NavBrand>;
 export default NavBrand;

package/dist/types.d.ts

@@ -293,18 +293,17 @@ export interface ButtonToggleContext {
     toggleSelected: (toggleValue: string) => void;
     isSelected: (toggleValue: string) => boolean;
 }
-export interface CheckIconProps extends SVGAttributes<SVGSVGElement> {
-}
+export type CheckIconProps = SVGAttributes<SVGSVGElement>;
 export type CardProps = Omit<CardVariants, "href"> & AnchorDivAttributes & {
     children: Snippet;
     img?: string;
     imgClass?: ClassValue;
     contentClass?: string;
 };
-export type State = {
+export type CarouselState = {
     images: HTMLImgAttributes[];
     index: number;
-    lastSlideChange: Date;
+    lastSlideChange: number;
     slideDuration: number;
     forward: boolean;
     changeSlide: (newIndex: number) => void;
@@ -499,8 +498,7 @@ export interface DropdownProps extends PopperProps {
     activeUrl?: string;
     isOpen?: boolean;
 }
-export interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {
-}
+export type DropdownDividerProps = HTMLAttributes<HTMLDivElement>;
 export interface DropdownHeaderProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
 }
@@ -945,8 +943,7 @@ export interface NavbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "child
     closeOnClickOutside?: boolean;
     breakpoint?: NavbarBreakpoint;
 }
-export interface NavBrandProps extends HTMLAnchorAttributes {
-}
+export type NavBrandProps = HTMLAnchorAttributes;
 export interface NavContainerProps extends HTMLAttributes<HTMLDivElement> {
     fluid?: boolean;
 }

package/package.json

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