flowbite-svelte 1.19.1 → 1.20.0

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/range/Range.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L832)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L833)
 ## Props
 @prop value = $bindable()
 @prop appearance = "none"

package/dist/forms/range/Range.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RangeProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L832)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L833)
  * ## Props
  * @prop value = $bindable()
  * @prop appearance = "none"

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 });
@@ -47,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L838)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L839)
 ## Props
 @prop children
 @prop inputClass

package/dist/forms/search/Search.svelte.d.ts

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

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(
@@ -160,7 +178,17 @@
     </div>
   {/each}
   <div class="relative w-full" bind:this={inputContainer}>
-    <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) })} />
+    <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,
@@ -76,7 +101,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L947)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L948)
 ## Props
 @prop header
 @prop footer

package/dist/forms/textarea/Textarea.svelte.d.ts

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

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: {

package/dist/forms/timepicker/Timepicker.svelte

@@ -13,7 +13,32 @@
   import { parse, isValid, isBefore, isAfter } from "date-fns";
   import { getTheme } from "../../theme/themeUtils";
 
-  let { id = "time", endId = "end-time", value = $bindable("00:00"), endValue = $bindable("00:00"), min = "", max = "", required = true, disabled = false, inputColor, buttonColor = "primary", Icon, iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400", type = "default", optionLabel = "Options", options = [], size = "md", divClass, inputClass, selectClass, timerangeLabel = "Choose time range", timerangeButtonLabel = "Save time", timeIntervals = [], columns = 2, onselect }: TimepickerProps = $props();
+  let {
+    id = "time",
+    endId = "end-time",
+    value = $bindable("00:00"),
+    endValue = $bindable("00:00"),
+    min = "",
+    max = "",
+    required = true,
+    disabled = false,
+    inputColor,
+    buttonColor = "primary",
+    Icon,
+    iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400",
+    type = "default",
+    optionLabel = "Options",
+    options = [],
+    size = "md",
+    divClass,
+    inputClass,
+    selectClass,
+    timerangeLabel = "Choose time range",
+    timerangeButtonLabel = "Save time",
+    timeIntervals = [],
+    columns = 2,
+    onselect
+  }: TimepickerProps = $props();
 
   const theme = getTheme("timepicker");
 
@@ -162,7 +187,19 @@
 {#if type !== "inline-buttons"}
   <ButtonGroup {size} class={styles.buttonGroup({ class: clsx(theme?.buttonGroup, divClass) })}>
     {#if type === "default"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(styles.inputWithIcon(), theme?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Input
+        {id}
+        color={inputColor}
+        type="time"
+        {min}
+        {max}
+        {required}
+        {disabled}
+        class={styles.input({ class: clsx(styles.inputWithIcon(), theme?.input, inputClass) })}
+        bind:value
+        oninput={(e) => handleTimeChange(e)}
+        onchange={(e) => handleTimeChange(e)}
+      />
       <div class={styles.iconWrapper({ class: clsx(theme?.iconWrapper) })}>
         {#if Icon}
           <Icon class={iconClass} />
@@ -173,10 +210,34 @@
         {/if}
       </div>
     {:else if type === "select"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(theme?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Input
+        {id}
+        color={inputColor}
+        type="time"
+        {min}
+        {max}
+        {required}
+        {disabled}
+        class={styles.input({ class: clsx(theme?.input, inputClass) })}
+        bind:value
+        oninput={(e) => handleTimeChange(e)}
+        onchange={(e) => handleTimeChange(e)}
+      />
       <Select selectClass={styles.select({ class: clsx(theme?.select, selectClass) })} onchange={handleOptionSelect} items={options} value={selectedOption} />
     {:else if type === "dropdown"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(theme?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Input
+        {id}
+        color={inputColor}
+        type="time"
+        {min}
+        {max}
+        {required}
+        {disabled}
+        class={styles.input({ class: clsx(theme?.input, inputClass) })}
+        bind:value
+        oninput={(e) => handleTimeChange(e)}
+        onchange={(e) => handleTimeChange(e)}
+      />
       <Button color={buttonColor} class={styles.button({ class: clsx(theme?.button) })}>
         {optionLabel}
         <svg class={styles.buttonIcon({ class: clsx(theme?.buttonIcon) })} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -192,7 +253,19 @@
       </Dropdown>
     {:else if type === "range"}
       <div class={styles.rangeInputWrapper({ class: clsx(theme?.rangeInputWrapper) })}>
-        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(theme?.rangeInput, styles.rangeInput(), inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+        <Input
+          {id}
+          color={inputColor}
+          type="time"
+          {min}
+          {max}
+          {required}
+          {disabled}
+          class={styles.input({ class: clsx(theme?.rangeInput, styles.rangeInput(), inputClass) })}
+          bind:value
+          oninput={(e) => handleTimeChange(e)}
+          onchange={(e) => handleTimeChange(e)}
+        />
         <button type="button" class={styles.rangeButton({ class: clsx(theme?.rangeButton) })} onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
           {#if Icon}
             <Icon class={iconClass} />
@@ -205,7 +278,19 @@
       </div>
       <span class={styles.rangeSeparator({ class: clsx(theme?.rangeSeparator) })}>-</span>
       <div class={styles.rangeInputWrapper({ class: clsx(theme?.rangeInputWrapper) })}>
-        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(styles.rangeInput(), theme?.rangeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+        <Input
+          id={endId}
+          color={inputColor}
+          type="time"
+          {min}
+          {max}
+          {required}
+          {disabled}
+          class={styles.input({ class: clsx(styles.rangeInput(), theme?.rangeInput, inputClass) })}
+          bind:value={endValue}
+          oninput={(e) => handleTimeChange(e, true)}
+          onchange={(e) => handleTimeChange(e, true)}
+        />
         <button type="button" class={styles.rangeButton({ class: clsx(theme?.rangeButton) })} onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
           {#if Icon}
             <Icon class={iconClass} />
@@ -228,11 +313,35 @@
           <div class={styles.dropdownTimeRow({ class: clsx(theme?.dropdownTimeRow) })}>
             <div class={styles.dropdownTimeCol({ class: clsx(theme?.dropdownTimeCol) })}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.dropdownTimeInput({ class: clsx(theme?.dropdownTimeInput, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+              <Input
+                {id}
+                color={inputColor}
+                type="time"
+                {min}
+                {max}
+                {required}
+                {disabled}
+                class={styles.dropdownTimeInput({ class: clsx(theme?.dropdownTimeInput, inputClass) })}
+                bind:value
+                oninput={(e) => handleTimeChange(e)}
+                onchange={(e) => handleTimeChange(e)}
+              />
             </div>
             <div class={styles.dropdownTimeCol({ class: clsx(theme?.dropdownTimeCol) })}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.dropdownTimeInput({ class: clsx(theme?.dropdownTimeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+              <Input
+                id={endId}
+                color={inputColor}
+                type="time"
+                {min}
+                {max}
+                {required}
+                {disabled}
+                class={styles.dropdownTimeInput({ class: clsx(theme?.dropdownTimeInput, inputClass) })}
+                bind:value={endValue}
+                oninput={(e) => handleTimeChange(e, true)}
+                onchange={(e) => handleTimeChange(e, true)}
+              />
             </div>
           </div>
           <Button color={buttonColor} class={styles.dropdownButton({ class: clsx(theme?.dropdownButton) })} onclick={applyTimerange}>
@@ -249,11 +358,35 @@
           <div class={styles.toggleTimeRow({ class: clsx(theme?.toggleTimeRow) })}>
             <div class={styles.toggleTimeCol({ class: clsx(theme?.toggleTimeCol) })}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.toggleTimeInput({ class: clsx(theme?.toggleTimeInput, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+              <Input
+                {id}
+                color={inputColor}
+                type="time"
+                {min}
+                {max}
+                {required}
+                {disabled}
+                class={styles.toggleTimeInput({ class: clsx(theme?.toggleTimeInput, inputClass) })}
+                bind:value
+                oninput={(e) => handleTimeChange(e)}
+                onchange={(e) => handleTimeChange(e)}
+              />
             </div>
             <div class={styles.toggleTimeCol({ class: clsx(theme?.toggleTimeCol) })}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.toggleTimeInput({ class: clsx(theme?.toggleTimeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+              <Input
+                id={endId}
+                color={inputColor}
+                type="time"
+                {min}
+                {max}
+                {required}
+                {disabled}
+                class={styles.toggleTimeInput({ class: clsx(theme?.toggleTimeInput, inputClass) })}
+                bind:value={endValue}
+                oninput={(e) => handleTimeChange(e, true)}
+                onchange={(e) => handleTimeChange(e, true)}
+              />
             </div>
           </div>
         {/if}
@@ -274,7 +407,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L918)
+[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L919)
 ## Props
 @prop id = "time"
 @prop endId = "end-time"

package/dist/forms/timepicker/Timepicker.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TimepickerProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L918)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L919)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"

package/dist/forms/toggle/Toggle.svelte

@@ -30,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L969)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L970)
 ## Props
 @prop children
 @prop size = "default"

package/dist/forms/toggle/Toggle.svelte.d.ts

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

package/dist/gallery/Gallery.svelte

@@ -42,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L986)
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L987)
 ## Props
 @prop children
 @prop figure

package/dist/gallery/Gallery.svelte.d.ts

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

package/dist/index.d.ts

@@ -79,3 +79,4 @@ export * from "./video";
 export * from "./utils";
 export * from "./types";
 export * from "./virtuallist";
+export * from "./kanban";

package/dist/index.js

@@ -85,3 +85,4 @@ export * from "./utils";
 export * from "./types";
 // extend
 export * from "./virtuallist";
+export * from "./kanban";

package/dist/indicator/Indicator.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L997)
+[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L998)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/indicator/Indicator.svelte.d.ts

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

package/dist/kanban/KanbanBoard.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { KanbanBoardProps, KanbanCardType, KanbanColumnType } from "../types";
+  import clsx from "clsx";
+  import { kanbanBoard } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import KanbanCard from "./KanbanCard.svelte";
+
+  let {
+    columns = $bindable([]),
+    onMove = (_card: KanbanCardType, _from: KanbanColumnType, _to: KanbanColumnType) => {},
+    onAddCard = (_col: KanbanColumnType) => {},
+    class: className,
+    classes,
+    ...restProps
+  }: KanbanBoardProps = $props();
+
+  const theme = getTheme("kanbanBoard");
+
+  // Changed from KanbanCard to KanbanCardType
+  let draggedCard = $state<KanbanCardType | null>(null);
+  let sourceColumnId = $state<string | number | null>(null);
+  let dragOverColumnId = $state<string | number | null>(null);
+
+  const styles = kanbanBoard();
+
+  // Changed parameter type from KanbanCard to KanbanCardType
+  function handleDragStart(card: KanbanCardType, colId: string | number) {
+    draggedCard = card;
+    sourceColumnId = colId;
+  }
+
+  function handleDragOver(e: DragEvent, colId: string | number) {
+    e.preventDefault();
+    dragOverColumnId = colId;
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    const currentTarget = e.currentTarget as HTMLElement;
+    const relatedTarget = e.relatedTarget as Node | null;
+    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+      dragOverColumnId = null;
+    }
+  }
+
+  function handleDrop(e: DragEvent, targetColId: string | number) {
+    e.preventDefault();
+    dragOverColumnId = null;
+
+    if (draggedCard === null || sourceColumnId === null) return;
+    if (sourceColumnId === targetColId) {
+      draggedCard = null;
+      sourceColumnId = null;
+      return;
+    }
+
+    const fromCol = columns.find((c) => c.id === sourceColumnId);
+    const toCol = columns.find((c) => c.id === targetColId);
+    if (!fromCol || !toCol) return;
+
+    fromCol.cards = fromCol.cards.filter((c) => c.id !== draggedCard!.id);
+    toCol.cards = [...toCol.cards, draggedCard!];
+
+    onMove(draggedCard, fromCol, toCol);
+
+    draggedCard = null;
+    sourceColumnId = null;
+  }
+
+  function handleDragEnd() {
+    draggedCard = null;
+    sourceColumnId = null;
+    dragOverColumnId = null;
+  }
+</script>
+
+<div {...restProps} class={styles.container({ class: clsx(theme?.container, className) })}>
+  {#each columns as col (col.id)}
+    <div
+      role="group"
+      aria-label={`${col.title} column drop zone`}
+      class={styles.column({ isDragOver: dragOverColumnId === col.id, class: clsx(theme?.column, classes?.column) })}
+      ondragover={(e) => handleDragOver(e, col.id)}
+      ondragleave={(e) => handleDragLeave(e)}
+      ondrop={(e) => handleDrop(e, col.id)}
+      style={col.color ? `border-top: 4px solid ${col.color}` : ""}
+    >
+      <h2 class={styles.columnTitle({ class: clsx(theme?.columnTitle, classes?.columnTitle) })}>{col.title}</h2>
+
+      <div class={styles.cardList({ class: clsx(theme?.cardList, classes?.cardList) })} role="list" aria-label={`${col.title} cards`}>
+        {#each col.cards as card (card.id)}
+          <KanbanCard {card} {classes} isDragging={draggedCard?.id === card.id} onDragStart={() => handleDragStart(card, col.id)} onDragEnd={handleDragEnd} />
+        {/each}
+      </div>
+
+      <button class={styles.addButton({ class: clsx(theme?.addButton, classes?.addButton) })} onclick={() => onAddCard(col)} aria-label={`Add card to ${col.title}`}>+ Add card</button>
+    </div>
+  {/each}
+</div>

package/dist/kanban/KanbanBoard.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { KanbanBoardProps } from "../types";
+declare const KanbanBoard: import("svelte").Component<KanbanBoardProps, {}, "columns">;
+type KanbanBoard = ReturnType<typeof KanbanBoard>;
+export default KanbanBoard;