flowbite-svelte 1.18.2 → 1.19.1

package/dist/alert/Alert.svelte

@@ -25,7 +25,7 @@
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
-  function close(event: MouseEvent) {
+  function close() {
     if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
       alertStatus = false;
     }

package/dist/badge/Badge.svelte

@@ -20,7 +20,7 @@
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
-  const close = (ev: Event) => {
+  const close = () => {
     if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
       badgeStatus = false;
     }

package/dist/carousel/Carousel.svelte

@@ -57,7 +57,7 @@
   const nextSlide = () => changeSlide(_state.index + 1);
   const prevSlide = () => changeSlide(_state.index - 1);
 
-  const loop = (node: HTMLElement) => {
+  const loop = () => {
     // loop timer
     /* eslint-disable  @typescript-eslint/no-explicit-any */
     let intervalId: any;
@@ -127,7 +127,7 @@
   let onDragStop = $derived(
     activeDragGesture === undefined
       ? undefined
-      : (evt: MouseEvent | TouchEvent) => {
+      : () => {
           // These might be exposed one day, keep them safely tucked away as constants.
           const SWIPE_MAX_DURATION = 250;
           const SWIPE_MIN_DISTANCE = 30;

package/dist/dialog/Dialog.svelte

@@ -14,7 +14,7 @@
 
   let { base, form: formCls, close: closeCls } = dialog();
 
-  const close = (dlg: HTMLDialogElement) => (open = false);
+  const close = () => (open = false);
 
   // Prefer requestClose when available to trigger a cancellable "cancel" event; otherwise synthesize it.
   const cancel = (dlg: HTMLDialogElement) => {
@@ -34,7 +34,7 @@
     if (ev.defaultPrevented) return;
 
     ev.preventDefault(); // prevent anyway, we need clean close
-    if (!permanent) close(ev.currentTarget);
+    if (!permanent) close();
   }
 
   function _onclick(ev: MouseEvent & { currentTarget: HTMLDialogElement }) {
@@ -50,7 +50,7 @@
     }
 
     if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
-      return close(dlg);
+      return close();
     }
   }
 
@@ -82,7 +82,7 @@
       if (result === false) return;
     }
 
-    close(dlg);
+    close();
   }
 
   function _ontoggle(ev: ToggleEvent & { currentTarget: HTMLDialogElement }) {
@@ -112,7 +112,7 @@
 
   let ref: HTMLDialogElement | undefined = $state(undefined);
 
-  function close_handler(ev: MouseEvent) {
+  function close_handler() {
     if (form) {
       // dialog/form mechanism will close the dialog
       return;

package/dist/forms/input-field/Input.svelte

@@ -103,7 +103,7 @@
     }
   });
 
-  function defaultHandleInput(event: Event) {
+  function defaultHandleInput(_event: Event) {
     // Ensure value is treated as a string to safely check its length
     const currentValueAsString = String(value || "");
     if (currentValueAsString.length > 0) {
@@ -112,12 +112,12 @@
     updateSuggestions();
   }
 
-  function defaultHandleFocus(event: FocusEvent) {
+  function defaultHandleFocus() {
     isFocused = true;
     updateSuggestions();
   }
 
-  function defaultHandleBlur(event: FocusEvent) {
+  function defaultHandleBlur() {
     // Small delay to allow click on suggestion to fire first
     setTimeout(() => {
       isFocused = false;
@@ -174,14 +174,14 @@
     if (resolvedOnFocus) {
       resolvedOnFocus(event);
     }
-    defaultHandleFocus(event);
+    defaultHandleFocus();
   }
 
   function handleBlur(event: FocusEvent) {
     if (resolvedOnBlur) {
       resolvedOnBlur(event);
     }
-    defaultHandleBlur(event);
+    defaultHandleBlur();
   }
 
   function handleKeydown(event: KeyboardEvent) {

package/dist/forms/phoneinput/PhoneInput.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { PhoneInputProps } from "../..";
-declare const PhoneInput: import("svelte").Component<PhoneInputProps<number>, {}, "">;
+declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "">;
 type PhoneInput = ReturnType<typeof PhoneInput>;
 export default PhoneInput;

package/dist/forms/tags/Tags.svelte

@@ -51,10 +51,6 @@
     });
   }
 
-  const checkDropdownPosition = () => {
-    if (!inputContainer) return;
-  };
-
   const handleKeys = (event: KeyboardEvent) => {
     if (event.key === "Enter") {
       event.preventDefault();
@@ -102,10 +98,6 @@
     }
   };
 
-  const handleInput = () => {
-    checkDropdownPosition();
-  };
-
   const deleteField = (index: number) => {
     value = value.filter((_, i) => i !== index);
     errorMessage = "";
@@ -135,7 +127,7 @@
   });
 </script>
 
-<svelte:window on:scroll={checkDropdownPosition} on:resize={checkDropdownPosition} />
+<svelte:window />
 
 {#if showAvailableTags && availableTags.length > 0}
   <P class={clsx(info(), classes?.info)}>Available tags: {availableTags.join(", ")}</P>
@@ -149,6 +141,10 @@
   {/if}
 {/if}
 
+{#if errorMessage}
+  <P class={clsx(error(), classes?.error)}>{errorMessage}</P>
+{/if}
+
 <div
   {...restProps}
   class={base({
@@ -164,7 +160,7 @@
     </div>
   {/each}
   <div class="relative w-full" bind:this={inputContainer}>
-    <input {...inputProps} {disabled} bind:this={inputElement} onkeydown={handleKeys} oninput={handleInput} bind:value={contents} placeholder={value.length === 0 ? placeholder : ""} type="text" autocomplete="off" class={inputCls({ class: clsx(styling.input) })} />
+    <input {...inputProps} {disabled} bind:this={inputElement} onkeydown={handleKeys} bind:value={contents} placeholder={value.length === 0 ? placeholder : ""} type="text" autocomplete="off" class={inputCls({ class: clsx(styling.input) })} />
     {#if availableTags.length > 0 && contents.trim() !== ""}
       {@const filteredSuggestions = availableTags.filter((tag) => tag.toLowerCase().includes(contents.trim().toLowerCase()) && (!unique || !value.some((t) => t.toLowerCase() === tag.toLowerCase())))}
       {#if filteredSuggestions.length > 0}

package/dist/forms/timepicker/Timepicker.svelte

@@ -22,7 +22,6 @@
 
   // State
   let selectedOption = $state("");
-  let dropdownOpen = $state(false);
   let showTimerange = $state(false);
 
   // Helper functions using date-fns
@@ -117,7 +116,6 @@
   }
 
   function handleDropdownSelect(option: TimePickerOption): void {
-    dropdownOpen = false;
     selectedOption = option.value;
     notifyChange();
   }
@@ -133,7 +131,6 @@
   }
 
   function applyTimerange(): void {
-    dropdownOpen = false;
     notifyChange();
   }
 

package/dist/index.d.ts

@@ -78,3 +78,4 @@ export * from "./typography/span";
 export * from "./video";
 export * from "./utils";
 export * from "./types";
+export * from "./virtuallist";

package/dist/index.js

@@ -83,3 +83,5 @@ export * from "./typography/span";
 export * from "./video";
 export * from "./utils";
 export * from "./types";
+// extend
+export * from "./virtuallist";

package/dist/mega-menu/MegaMenu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { megamenu } from "./theme";
   import clsx from "clsx";
-  import type { MegaMenuProps, LinkType } from "..";
+  import type { MegaMenuProps } from "..";
   import Popper from "../utils/Popper.svelte";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
@@ -10,14 +10,7 @@
   //  ulClass, extraClass
   warnThemeDeprecation("MegaMenu", { ulClass, extraClass }, { ulClass: "ul", extraClass: "extra" });
   const styling = $derived(classes ?? { ul: ulClass, extra: extraClass });
-
   const theme = getTheme("megamenu");
-
-  /* eslint-disable  @typescript-eslint/no-explicit-any */
-  interface LinkTypeLike extends LinkType {
-    [propName: string]: any;
-  }
-
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, hasExtra: !!extra }));
 </script>
 

package/dist/navbar/NavHamburger.svelte

@@ -18,7 +18,7 @@
   const navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
   const { base, menu } = navbarHamburger({ breakpoint: navBreakpoint });
 
-  const toggle: MouseEventHandler<HTMLButtonElement> = (ev) => {
+  const toggle: MouseEventHandler<HTMLButtonElement> = () => {
     navState.hidden = !navState.hidden;
   };
 </script>

package/dist/rating/Review.svelte

@@ -4,7 +4,7 @@
   import type { ReviewProps } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
-  let { children, address, item1, item2, item3, review, class: className, classes, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: ReviewProps = $props();
+  let { children, address, item1, item2, item3, review, classes, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: ReviewProps = $props();
 
   warnThemeDeprecation("Review", { articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }, { articleClass: "article", divClass: "div", div2Class: "div2", div3Class: "div3", imgClass: "img", ulClass: "ul", liClass: "li" });
   const styling = $derived(
@@ -102,7 +102,6 @@
 @prop item2
 @prop item3
 @prop review
-@prop class: className
 @prop classes
 @prop articleClass
 @prop divClass

package/dist/rating/Review.svelte.d.ts

@@ -10,7 +10,6 @@ import type { ReviewProps } from "../types";
  * @prop item2
  * @prop item3
  * @prop review
- * @prop class: className
  * @prop classes
  * @prop articleClass
  * @prop divClass

package/dist/step-indicator/StepIndicator.svelte

@@ -33,7 +33,7 @@
   {/if}
 
   <div class={container({ class: clsx((theme as StepIndicatorTheme)?.container, classes?.container) })}>
-    {#each steps as step, i}
+    {#each steps as _step, i}
       {#if i === currentStep - 1}
         <div class={wrapper({ class: clsx((theme as StepIndicatorTheme)?.wrapper, classes?.wrapper) })}>
           <div class={stepCls({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step, classes?.step) })} data-state="current"></div>

package/dist/stepper/DetailedStepper.svelte

@@ -18,7 +18,7 @@
   {#if children}
     {@render children()}
   {:else if steps}
-    {#each steps as step, index}
+    {#each steps as step}
       <li class={item({ status: step.status, class: clsx(theme?.item, classes?.item) })}>
         <span class={indicator({ status: step.status, class: clsx(theme?.indicator, classes?.indicator) })}>
           {#if step.status === "completed" && step.icon}

package/dist/stepper/VerticalStepper.svelte

@@ -18,7 +18,7 @@
   {#if children}
     {@render children()}
   {:else if steps}
-    {#each steps as step, index}
+    {#each steps as step}
       <li class={clsx(liClass)}>
         <div class={card({ status: step.status, class: clsx(theme?.card, classes?.card) })} role="alert">
           <div class={content({ class: clsx(theme?.content, classes?.content) })}>

package/dist/theme/themes.d.ts

@@ -68,3 +68,4 @@ export { mark } from "../typography/mark";
 export { paragraph } from "../typography/paragraph";
 export { secondary } from "../typography/secondary";
 export { span } from "../typography/span";
+export { virtualList } from "../virtuallist";

package/dist/theme/themes.js

@@ -1,3 +1,4 @@
+// components
 export { accordion, accordionItem } from "../accordion";
 export { alert } from "../alert";
 export { avatar } from "../avatar";
@@ -73,3 +74,5 @@ export { mark } from "../typography/mark";
 export { paragraph } from "../typography/paragraph";
 export { secondary } from "../typography/secondary";
 export { span } from "../typography/span";
+// extend
+export { virtualList } from "../virtuallist";

package/dist/toast/Toast.svelte

@@ -30,7 +30,7 @@
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
-  function _close(event: MouseEvent) {
+  function _close() {
     if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
       toastStatus = false;
     }

package/dist/tooltip/Tooltip.svelte

@@ -3,12 +3,9 @@
   import Popper from "../utils/Popper.svelte";
   import { tooltip } from "./theme";
   import type { TooltipProps, TriggeredToggleEvent } from "../types";
-  import { getTheme } from "../theme/themeUtils";
 
   let { type = "dark", color = undefined, trigger = "hover", arrow = true, children, placement = "top", onbeforetoggle: _onbeforetoggle, class: className, isOpen = $bindable(false), ...restProps }: TooltipProps = $props();
 
-  const theme = getTheme("tooltip");
-
   const base = $derived(tooltip({ color, type, class: clsx(className) }));
   function onbeforetoggle(ev: TriggeredToggleEvent) {
     // block all focusable elements inside the tooltip

package/dist/types.d.ts

@@ -72,6 +72,7 @@ import type { AndroidVariants, DefaultMockupVariants, DesktopVariants, IosVarian
 import type { ApexOptions } from "apexcharts";
 import type { ButtonToggleVariants } from "./forms/button-toggle/theme";
 import type { TagsVariants } from "./forms/tags/theme";
+import type { VirtualListVariants } from "./virtuallist/theme";
 import type { CloseButtonVariants } from "./utils/theme";
 import type { DialogVariants } from "./dialog/theme";
 export declare const xs = "xs";
@@ -685,7 +686,7 @@ export interface InputAddonProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
     size?: ButtonGroupProps["size"];
 }
-export interface PhoneInputProps<T extends InputValue = number> extends PhoneInputVariants, Omit<HTMLInputAttributes, "size" | "children" | "value"> {
+export interface PhoneInputProps extends PhoneInputVariants, Omit<HTMLInputAttributes, "size" | "children" | "value"> {
     phoneType?: "default" | "floating" | "countryCode" | "copy" | "advanced";
     children?: Snippet;
     floatingLabel?: string;
@@ -1753,3 +1754,13 @@ export interface ArrowProps {
     strategy?: "absolute" | "fixed";
     class?: ClassValue | null;
 }
+export interface VirtualListProps<T = unknown> extends VirtualListVariants, Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: Snippet<[item: T, index: number]>;
+    items?: T[];
+    minItemHeight?: number;
+    height?: number;
+    overscan?: number;
+    getItemHeight?: (item: T, index: number) => number;
+    scrollToIndex?: (fn: (index: number) => void) => void;
+    class?: ClassValue | null;
+}

package/dist/virtuallist/VirtualList.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type { VirtualListProps } from "../types";
+  import { virtualList } from "./theme";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  // Destructure props with defaults
+  let {
+    items = [],
+    minItemHeight = 50,
+    height = 400,
+    overscan = 5,
+    getItemHeight,
+    scrollToIndex, // Bind function to parent
+    children,
+    class: className,
+    classes
+  }: VirtualListProps = $props();
+
+  const theme = getTheme("virtualList");
+
+  let container: HTMLDivElement | undefined;
+  let scrollTop = $state(0);
+  let rafId: number | undefined;
+
+  const styles = virtualList();
+
+  // Total height of all items
+  const totalHeight = $derived.by(() => items.reduce((sum: number, item, i) => sum + (getItemHeight ? getItemHeight(item, i) : (minItemHeight ?? 50)), 0));
+
+  // Find the first visible index
+  const startIndex = $derived.by(() => {
+    let y = 0;
+    for (let i = 0; i < items.length; i++) {
+      const h = getItemHeight ? getItemHeight(items[i], i) : (minItemHeight ?? 50);
+      if (y + h > scrollTop) return Math.max(0, i - overscan);
+      y += h;
+    }
+    return 0;
+  });
+
+  // Find the last visible index
+  const endIndex = $derived.by(() => {
+    let y = 0;
+    for (let i = 0; i < items.length; i++) {
+      const h = getItemHeight ? getItemHeight(items[i], i) : (minItemHeight ?? 50);
+      y += h;
+      if (y >= scrollTop + height) return Math.min(items.length, i + overscan + 1);
+    }
+    return items.length;
+  });
+
+  // Items currently rendered
+  const visibleItems = $derived.by(() => items.slice(startIndex, endIndex));
+
+  // Offset of the first visible item
+  const offsetY = $derived.by(() => items.slice(0, startIndex).reduce((sum: number, item, i) => sum + (getItemHeight ? getItemHeight(item, i) : (minItemHeight ?? 50)), 0));
+
+  // Performance optimized scroll handler using RAF
+  function handleScroll() {
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      if (container) scrollTop = container.scrollTop;
+    });
+  }
+
+  // Scroll to specific index
+  function scrollToIndexImpl(index: number) {
+    if (!container || index < 0 || index >= items.length) return;
+
+    let y = 0;
+    for (let i = 0; i < index; i++) {
+      y += getItemHeight ? getItemHeight(items[i], i) : (minItemHeight ?? 50);
+    }
+    container.scrollTop = y;
+  }
+
+  // Bind scrollToIndex function to parent component
+  $effect(() => {
+    if (scrollToIndex) {
+      scrollToIndex(scrollToIndexImpl);
+    }
+  });
+
+  // Cleanup RAF on unmount
+  $effect(() => {
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  });
+</script>
+
+<div bind:this={container} onscroll={handleScroll} role="list" aria-label="Virtual scrolling list" class={styles.container({ class: clsx(theme?.container, className) })} style={`height:${height}px; position:relative;`}>
+  <div class={styles.spacer({ class: clsx(theme?.spacer, classes?.spacer) })} style={`height:${totalHeight}px;`}>
+    <div class={styles.content({ class: clsx(theme?.content, classes?.content) })} style={`transform:translateY(${offsetY}px); will-change:transform;`}>
+      {#each visibleItems as item, i (startIndex + i)}
+        {@render children?.(item, startIndex + i)}
+      {/each}
+    </div>
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[VirtualListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2048)
+## Props
+@prop items = []
+@prop minItemHeight = 50
+@prop height = 400
+@prop overscan = 5
+@prop getItemHeight
+@prop scrollToIndex
+@prop children
+@prop class: className
+@prop classes
+-->

package/dist/virtuallist/VirtualList.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { VirtualListProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [VirtualListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2048)
+ * ## Props
+ * @prop items = []
+ * @prop minItemHeight = 50
+ * @prop height = 400
+ * @prop overscan = 5
+ * @prop getItemHeight
+ * @prop scrollToIndex
+ * @prop children
+ * @prop class: className
+ * @prop classes
+ */
+declare const VirtualList: import("svelte").Component<VirtualListProps<unknown>, {}, "">;
+type VirtualList = ReturnType<typeof VirtualList>;
+export default VirtualList;

package/dist/virtuallist/index.d.ts

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

package/dist/virtuallist/index.js

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

package/dist/virtuallist/theme.d.ts

@@ -0,0 +1,40 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type VirtualListVariants = VariantProps<typeof virtualList> & Classes<typeof virtualList>;
+export declare const virtualList: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            container?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            spacer?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            container?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            spacer?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    spacer: string;
+    content: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            container?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            spacer?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    spacer: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    container: string;
+    spacer: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/virtuallist/theme.js

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+export const virtualList = tv({
+    slots: {
+        container: "overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent",
+        spacer: "relative",
+        content: "absolute top-0 left-0 right-0"
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.18.2",
+  "version": "1.19.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -825,6 +825,10 @@
       "types": "./dist/video/Video.svelte.d.ts",
       "svelte": "./dist/video/Video.svelte"
     },
+    "./VirtualList.svelte": {
+      "types": "./dist/virtuallist/VirtualList.svelte.d.ts",
+      "svelte": "./dist/virtuallist/VirtualList.svelte"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {