flowbite-svelte 1.19.0 → 1.20.0

package/dist/forms/floating-label/FloatingLabelInput.svelte

@@ -7,9 +7,36 @@
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
-  let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), variant = "standard", size = "default", color = "default", class: className, classes, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, placeholder, ...restProps }: FloatingLabelInputProps = $props();
-
-  warnThemeDeprecation("FloatingLabelInput", { inputClass, labelClass, clearableSvgClass, clearableClass, comboClass }, { inputClass: "input", labelClass: "label", clearableSvgClass: "svg", clearableClass: "close", comboClass: "combo" });
+  let {
+    children,
+    id = idGenerator(),
+    value = $bindable(),
+    elementRef = $bindable(),
+    variant = "standard",
+    size = "default",
+    color = "default",
+    class: className,
+    classes,
+    inputClass,
+    labelClass,
+    clearable,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    data = [],
+    maxSuggestions = 5,
+    onSelect,
+    comboClass,
+    placeholder,
+    ...restProps
+  }: FloatingLabelInputProps = $props();
+
+  warnThemeDeprecation(
+    "FloatingLabelInput",
+    { inputClass, labelClass, clearableSvgClass, clearableClass, comboClass },
+    { inputClass: "input", labelClass: "label", clearableSvgClass: "svg", clearableClass: "close", comboClass: "combo" }
+  );
   const styling = $derived(classes ?? { input: inputClass, label: labelClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass });
 
   const theme = getTheme("floatingLabelInput");
@@ -145,7 +172,18 @@
 {/if}
 
 <div class={base({ class: clsx(isCombobox ? "relative" : "", theme?.base, className) })}>
-  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} class={input({ class: clsx(theme?.input, styling.input) })} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
+  <input
+    {id}
+    placeholder=" "
+    bind:value
+    bind:this={elementRef}
+    {...restProps}
+    class={input({ class: clsx(theme?.input, styling.input) })}
+    oninput={handleInput}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    onkeydown={handleKeydown}
+  />
   {#if value !== undefined && value !== "" && clearable}
     <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
   {/if}
@@ -156,7 +194,12 @@
   {#if isCombobox && isFocused && filteredSuggestions.length > 0}
     <div class={combo({ class: clsx(theme?.combo, styling.combo) })}>
       {#each filteredSuggestions as item, i}
-        <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
+        <button
+          type="button"
+          class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none"
+          onclick={() => selectItem(item)}
+          onmouseenter={() => (selectedIndex = i)}
+        >
           {item}
         </button>
       {/each}

package/dist/forms/input-addon/InputAddon.svelte

@@ -31,7 +31,18 @@
   // size: explicit, inherited, default
   let _size = size || clampSize(group?.size) || "md";
 
-  let divClass: string = clsx(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "not-first:-ms-px", "first:rounded-s-lg last:rounded-e-lg", className);
+  let divClass: string = clsx(
+    textSizes[_size],
+    prefixPadding[_size],
+    "text-gray-500 bg-gray-200",
+    background ? darkBgClasses.tinted : darkBgClasses.base,
+    background ? divider.tinted : divider.base,
+    background ? borderClasses["tinted"] : borderClasses["base"],
+    "inline-flex items-center border",
+    group && "not-first:-ms-px",
+    "first:rounded-s-lg last:rounded-e-lg",
+    className
+  );
 </script>
 
 <div {...restProps} class={divClass}>

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

@@ -8,10 +8,47 @@
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
-  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, classes, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, comboItemClass, onInput, onFocus, onBlur, onKeydown, oninput, onfocus, onblur, onkeydown, ...restProps }: InputProps<InputValue> = $props();
+  let {
+    children,
+    left,
+    right,
+    value = $bindable(),
+    elementRef = $bindable(),
+    clearable = false,
+    size,
+    color = "default",
+    class: className,
+    classes,
+    wrapperClass,
+    leftClass,
+    rightClass,
+    divClass,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    data = [],
+    maxSuggestions = 5,
+    onSelect,
+    comboClass,
+    comboItemClass,
+    onInput,
+    onFocus,
+    onBlur,
+    onKeydown,
+    oninput,
+    onfocus,
+    onblur,
+    onkeydown,
+    ...restProps
+  }: InputProps<InputValue> = $props();
 
   // input, left, right, close, combo, comboItem, div, svg
-  warnThemeDeprecation("Input", { wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableClass, comboClass }, { wrapperClass: "wrapper", leftClass: "left", rightClass: "right", divClass: "div", clearableSvgClass: "svg", clearableClass: "close", comboClass: "comboItem" });
+  warnThemeDeprecation(
+    "Input",
+    { wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableClass, comboClass },
+    { wrapperClass: "wrapper", leftClass: "left", rightClass: "right", divClass: "div", clearableSvgClass: "svg", clearableClass: "close", comboClass: "comboItem" }
+  );
 
   const styling = $derived(classes ?? { left: leftClass, right: rightClass, div: divClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass, comboItem: comboItemClass });
 
@@ -103,7 +140,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 +149,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 +211,14 @@
     if (resolvedOnFocus) {
       resolvedOnFocus(event);
     }
-    defaultHandleFocus(event);
+    defaultHandleFocus();
   }
 
   function handleBlur(event: FocusEvent) {
     if (resolvedOnBlur) {
       resolvedOnBlur(event);
     }
-    defaultHandleBlur(event);
+    defaultHandleBlur();
   }
 
   function handleKeydown(event: KeyboardEvent) {
@@ -235,7 +272,12 @@
     {#if isCombobox && isFocused && filteredSuggestions.length > 0}
       <div class={combo({ class: clsx(theme?.combo, styling.combo) })}>
         {#each filteredSuggestions as item, i (item)}
-          <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
+          <button
+            type="button"
+            class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none"
+            onclick={() => selectItem(item)}
+            onmouseenter={() => (selectedIndex = i)}
+          >
             <p class={comboItem({ class: clsx(theme?.comboItem, styling.comboItem) })}>{item}</p>
           </button>
         {/each}
@@ -250,7 +292,16 @@
   {#if children}
     {@render children({ ...restProps, class: inputCls() })}
   {:else}
-    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={[wrapped || base(), inputCls({ class: clsx(theme?.input, className) })]} />
+    <input
+      {...restProps}
+      bind:value
+      bind:this={elementRef}
+      oninput={handleInput}
+      onfocus={handleFocus}
+      onblur={handleBlur}
+      onkeydown={handleKeydown}
+      class={[wrapped || base(), inputCls({ class: clsx(theme?.input, className) })]}
+    />
     {#if value !== undefined && value !== "" && clearable}
       <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
     {/if}

package/dist/forms/phoneinput/PhoneInput.svelte

@@ -4,7 +4,17 @@
   import clsx from "clsx";
   import { getTheme } from "../../theme/themeUtils";
 
-  let { children, phoneIcon = true, pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}", phoneType = "default", floatingLabel = "Phone number", labelFor = "floating-phone-number", class: className, classes, ...restProps }: PhoneInputProps = $props();
+  let {
+    children,
+    phoneIcon = true,
+    pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+    phoneType = "default",
+    floatingLabel = "Phone number",
+    labelFor = "floating-phone-number",
+    class: className,
+    classes,
+    ...restProps
+  }: PhoneInputProps = $props();
 
   const theme = getTheme("phoneInput");
 
@@ -13,7 +23,9 @@
 
 {#snippet phoneIconSnippet()}
   <svg class={svg({ class: clsx(theme?.svg) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
-    <path d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z" />
+    <path
+      d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z"
+    />
   </svg>
 {/snippet}
 

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/radio/Radio.svelte

@@ -7,7 +7,20 @@
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
 
   // remove inputClass in next major version
-  let { children, "aria-describedby": ariaDescribedby, inline = false, labelClass, color = "primary", custom = false, group = $bindable<T>(), value = $bindable<T>(), class: className, inputClass, classes, ...restProps }: RadioProps<T> = $props();
+  let {
+    children,
+    "aria-describedby": ariaDescribedby,
+    inline = false,
+    labelClass,
+    color = "primary",
+    custom = false,
+    group = $bindable<T>(),
+    value = $bindable<T>(),
+    class: className,
+    inputClass,
+    classes,
+    ...restProps
+  }: RadioProps<T> = $props();
 
   warnThemeDeprecation("Radio", { inputClass, labelClass }, { inputClass: "class", labelClass: "label" });
   const styling = $derived(classes ?? { label: labelClass });

package/dist/forms/search/Search.svelte

@@ -6,7 +6,22 @@
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
-  let { children, inputClass, size, placeholder = "Search", value = $bindable(), elementRef = $bindable(), clearable = false, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, class: className, classes, ...restProps }: SearchProps = $props();
+  let {
+    children,
+    inputClass,
+    size,
+    placeholder = "Search",
+    value = $bindable(),
+    elementRef = $bindable(),
+    clearable = false,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    class: className,
+    classes,
+    ...restProps
+  }: SearchProps = $props();
 
   warnThemeDeprecation("Search", { inputClass, clearableSvgClass, clearableClass }, { inputClass: "input", clearableSvgClass: "svg", clearableClass: "close" });
   const styling = $derived(classes ?? { input: inputClass, svg: clearableSvgClass, close: clearableClass });

package/dist/forms/select/MultiSelect.svelte

@@ -203,7 +203,16 @@
   {/each}
 </select>
 
-<div bind:this={multiSelectContainer} {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={base({ size, class: clsx(theme?.base, className) })}>
+<div
+  bind:this={multiSelectContainer}
+  {...restProps}
+  onclick={toggleDropdown}
+  onblur={handleBlur}
+  onkeydown={handleKeyDown}
+  tabindex="0"
+  role="listbox"
+  class={base({ size, class: clsx(theme?.base, className) })}
+>
   {#if !selectItems.length}
     <span class={placeholderSpan({ class: clsx(classes?.placeholder) })}>{placeholder}</span>
   {/if}

package/dist/forms/select/Select.svelte

@@ -7,7 +7,26 @@
   import { createDismissableContext } from "../../utils/dismissable";
   import { getContext } from "svelte";
 
-  let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", disabled, placeholder = "Choose option ...", clearable, clearableColor = "none", clearableOnClick, onClear, clearableSvgClass, clearableClass, selectClass, class: className, classes, ...restProps }: SelectProps<T> = $props();
+  let {
+    children,
+    items,
+    value = $bindable(),
+    elementRef = $bindable(),
+    underline,
+    size = "md",
+    disabled,
+    placeholder = "Choose option ...",
+    clearable,
+    clearableColor = "none",
+    clearableOnClick,
+    onClear,
+    clearableSvgClass,
+    clearableClass,
+    selectClass,
+    class: className,
+    classes,
+    ...restProps
+  }: SelectProps<T> = $props();
 
   // clearableSvgClass, clearableClass, selectClass
   warnThemeDeprecation("Select", { selectClass, clearableSvgClass, clearableClass }, { selectClass: "select", clearableSvgClass: "svg", clearableClass: "close" });

package/dist/forms/tags/Tags.svelte

@@ -8,7 +8,25 @@
   import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom";
   import { onDestroy } from "svelte";
 
-  let { value = $bindable([]), placeholder = "Enter tags", class: className, classes, itemClass, spanClass, closeClass, inputClass, closeBtnSize = "xs", unique = false, availableTags = [], showHelper = false, showAvailableTags = false, allowNewTags = true, inputProps = {}, disabled, ...restProps }: TagsProps = $props();
+  let {
+    value = $bindable([]),
+    placeholder = "Enter tags",
+    class: className,
+    classes,
+    itemClass,
+    spanClass,
+    closeClass,
+    inputClass,
+    closeBtnSize = "xs",
+    unique = false,
+    availableTags = [],
+    showHelper = false,
+    showAvailableTags = false,
+    allowNewTags = true,
+    inputProps = {},
+    disabled,
+    ...restProps
+  }: TagsProps = $props();
 
   warnThemeDeprecation("Tags", { itemClass, spanClass, closeClass, inputClass }, { itemClass: "tag", spanClass: "span", closeClass: "close", inputClass: "input" });
   const styling = $derived(
@@ -51,10 +69,6 @@
     });
   }
 
-  const checkDropdownPosition = () => {
-    if (!inputContainer) return;
-  };
-
   const handleKeys = (event: KeyboardEvent) => {
     if (event.key === "Enter") {
       event.preventDefault();
@@ -102,10 +116,6 @@
     }
   };
 
-  const handleInput = () => {
-    checkDropdownPosition();
-  };
-
   const deleteField = (index: number) => {
     value = value.filter((_, i) => i !== index);
     errorMessage = "";
@@ -135,7 +145,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 +159,10 @@
   {/if}
 {/if}
 
+{#if errorMessage}
+  <P class={clsx(error(), classes?.error)}>{errorMessage}</P>
+{/if}
+
 <div
   {...restProps}
   class={base({
@@ -164,7 +178,17 @@
     </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/textarea/Textarea.svelte

@@ -6,9 +6,34 @@
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
-  let { header, footer, addon, value = $bindable(), elementRef = $bindable(), divClass, innerClass, headerClass, footerClass, addonClass, disabled, class: className, classes, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, textareaClass, ...restProps }: TextareaProps = $props();
+  let {
+    header,
+    footer,
+    addon,
+    value = $bindable(),
+    elementRef = $bindable(),
+    divClass,
+    innerClass,
+    headerClass,
+    footerClass,
+    addonClass,
+    disabled,
+    class: className,
+    classes,
+    clearable,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    textareaClass,
+    ...restProps
+  }: TextareaProps = $props();
 
-  warnThemeDeprecation("Textarea", { divClass, innerClass, headerClass, footerClass, addonClass, textareaClass, clearableClass, clearableSvgClass }, { divClass: "div", innerClass: "inner", headerClass: "header", footerClass: "footer", addonClass: "addon", textareaClass: "class", clearableClass: "close", clearableSvgClass: "svg" });
+  warnThemeDeprecation(
+    "Textarea",
+    { divClass, innerClass, headerClass, footerClass, addonClass, textareaClass, clearableClass, clearableSvgClass },
+    { divClass: "div", innerClass: "inner", headerClass: "header", footerClass: "footer", addonClass: "addon", textareaClass: "class", clearableClass: "close", clearableSvgClass: "svg" }
+  );
   const styling = $derived(
     classes ?? {
       div: divClass,

package/dist/forms/textarea/theme.js

@@ -13,7 +13,9 @@ export const textarea = tv({
     },
     variants: {
         wrapped: {
-            false: { wrapper: "p-2.5 text-sm focus:outline-hidden focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50" }
+            false: {
+                wrapper: "p-2.5 text-sm focus:outline-hidden focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+            }
         },
         hasHeader: {
             true: {