flowbite-svelte 0.46.22 → 0.47.0

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -3,7 +3,7 @@ export let outerClass = "w-full";
 export let innerClass = "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600";
 </script>
 
-<div class={twMerge(outerClass, $$props.classOuter)} {...$$restProps}>
+<div {...$$restProps} class={twMerge(outerClass, $$props.classOuter)} >
   <div class={twMerge(innerClass, $$props.classInner)} role="group">
     <slot />
   </div>

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -6,7 +6,7 @@ export let spanClass = "ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text
 export let homeClass = "inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white";
 </script>
 
-<li class={twMerge('inline-flex items-center', $$props.class)} {...$$restProps}>
+<li {...$$restProps} class={twMerge('inline-flex items-center', $$props.class)}>
   {#if home}
     <a class={twMerge(homeClass, $$props.classHome)} {href}>
       {#if $$slots.icon}

package/dist/datepicker/Datepicker.svelte

@@ -1,65 +1,291 @@
-<script context="module"></script>
-
-<script>import Calendar from "./Calender.svelte";
+<script>import { createEventDispatcher, onMount } from "svelte";
+import { fade } from "svelte/transition";
+import { Button } from "..";
+import { ChevronLeftOutline, ChevronRightOutline, CalendarMonthSolid } from "flowbite-svelte-icons";
+export let value = null;
+export let defaultDate = null;
 export let range = false;
-export let datepickerButtons = false;
-export let datepickerFormat = "mm/dd/yyyy";
-export let datepickerOrientation = "bottom";
-export let datepickerTitle = "Flowbite datepicker";
-export let attribute = "";
-export let inputClass = "bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500";
-$: setAttribute = (node, params) => {
-  if (params) {
-    node.setAttribute(params, "");
+export let rangeFrom = null;
+export let rangeTo = null;
+export let locale = "default";
+export let firstDayOfWeek = 0;
+export let dateFormat = { year: "numeric", month: "long", day: "numeric" };
+export let placeholder = "Select date";
+export let disabled = false;
+export let required = false;
+export let inputClass = "";
+export let color = "primary";
+export let inline = false;
+export let autohide = true;
+export let showActionButtons = false;
+export let title = "";
+const dispatch = createEventDispatcher();
+let isOpen = inline;
+let inputElement;
+let currentMonth = value || defaultDate || /* @__PURE__ */ new Date();
+currentMonth.setDate(1);
+let focusedDate = null;
+let calendarRef;
+$: daysInMonth = getDaysInMonth(currentMonth);
+$: weekdays = getWeekdays();
+onMount(() => {
+  if (!inline) {
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }
+});
+function getFocusRingClass(color2) {
+  switch (color2) {
+    case "primary":
+      return "focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400";
+    case "blue":
+      return "focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400";
+    case "red":
+      return "focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400";
+    case "green":
+      return "focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400";
+    case "yellow":
+      return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400";
+    case "purple":
+      return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400";
+    default:
+      return "";
+  }
+}
+function getRangeBackgroundClass(color2) {
+  switch (color2) {
+    case "primary":
+      return "bg-primary-100 dark:bg-primary-900";
+    case "blue":
+      return "bg-blue-100 dark:bg-blue-900";
+    case "red":
+      return "bg-red-100 dark:bg-red-900";
+    case "green":
+      return "bg-green-100 dark:bg-green-900";
+    case "yellow":
+      return "bg-yellow-100 dark:bg-yellow-900";
+    case "purple":
+      return "bg-purple-100 dark:bg-purple-900";
+    default:
+      return "";
+  }
+}
+function getDaysInMonth(date) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const firstDay = new Date(year, month, 0);
+  const lastDay = new Date(year, month + 1, 0);
+  const daysArray = [];
+  let start = firstDay.getDay() - firstDayOfWeek;
+  if (start < 0) start += 7;
+  for (let i = 0; i < start; i++) {
+    daysArray.push(new Date(year, month, -i));
+  }
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    daysArray.push(new Date(year, month, i));
+  }
+  const remainingDays = 7 - daysArray.length % 7;
+  if (remainingDays < 7) {
+    for (let i = 1; i <= remainingDays; i++) {
+      daysArray.push(new Date(year, month + 1, i));
+    }
+  }
+  return daysArray;
+}
+function getWeekdays() {
+  const weekdays2 = [];
+  for (let i = 0; i < 7; i++) {
+    const day = new Date(2021, 5, i + firstDayOfWeek);
+    weekdays2.push(day.toLocaleString(locale, { weekday: "short" }));
+  }
+  return weekdays2;
+}
+function changeMonth(increment) {
+  currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + increment, 1);
+}
+function handleDaySelect(day) {
+  if (range) {
+    if (!rangeFrom || rangeFrom && rangeTo) {
+      rangeFrom = day;
+      rangeTo = null;
+    } else if (day < rangeFrom) {
+      rangeTo = rangeFrom;
+      rangeFrom = day;
+    } else {
+      rangeTo = day;
+    }
+    dispatch("select", { from: rangeFrom, to: rangeTo });
+  } else {
+    value = day;
+    dispatch("select", value);
+    if (autohide && !inline) isOpen = false;
+  }
+}
+function handleInputChange() {
+  const date = new Date(inputElement.value);
+  if (!isNaN(date.getTime())) {
+    handleDaySelect(date);
+  }
+}
+function handleClickOutside(event) {
+  if (isOpen && !inputElement.contains(event.target)) {
+    isOpen = false;
   }
-};
+}
+function formatDate(date) {
+  if (!date) return "";
+  return date.toLocaleDateString(locale, dateFormat);
+}
+function isSelected(day) {
+  if (range) {
+    return !!(rangeFrom && day.toDateString() === rangeFrom.toDateString()) || !!(rangeTo && day.toDateString() === rangeTo.toDateString());
+  }
+  return !!(value && day.toDateString() === value.toDateString());
+}
+function isInRange(day) {
+  if (!range || !rangeFrom || !rangeTo) return false;
+  return day > rangeFrom && day < rangeTo;
+}
+function isToday(day) {
+  const today = /* @__PURE__ */ new Date();
+  return day.toDateString() === today.toDateString();
+}
+function handleCalendarKeydown(event) {
+  if (!isOpen) return;
+  if (!focusedDate) {
+    focusedDate = value || /* @__PURE__ */ new Date();
+  }
+  switch (event.key) {
+    case "ArrowLeft":
+      focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() - 1);
+      break;
+    case "ArrowRight":
+      focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() + 1);
+      break;
+    case "ArrowUp":
+      focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() - 7);
+      break;
+    case "ArrowDown":
+      focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() + 7);
+      break;
+    case "Enter":
+      handleDaySelect(focusedDate);
+      break;
+    case "Escape":
+      isOpen = false;
+      inputElement.focus();
+      break;
+    default:
+      return;
+  }
+  event.preventDefault();
+  if (focusedDate.getMonth() !== currentMonth.getMonth()) {
+    currentMonth = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), 1);
+  }
+  setTimeout(() => {
+    const focusedButton = calendarRef.querySelector(`button[aria-label="${focusedDate.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`);
+    focusedButton?.focus();
+  }, 0);
+}
+function handleInputKeydown(event) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    isOpen = !isOpen;
+  }
+}
+function handleToday() {
+  handleDaySelect(/* @__PURE__ */ new Date());
+}
+function handleClear() {
+  value = null;
+  rangeFrom = null;
+  rangeTo = null;
+  dispatch("clear");
+}
+function handleApply() {
+  dispatch("apply", range ? { from: rangeFrom, to: rangeTo } : value);
+  if (!inline) isOpen = false;
+}
 </script>
 
-<svelte:head>
-  <link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
-  <script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
-</svelte:head>
-
-{#if range}
-  <div date-rangepicker class="flex items-center">
+<div class="relative {inline ? 'inline-block' : ''}">
+  {#if !inline}
     <div class="relative">
-      <div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
-        <Calendar />
-      </div>
-      <input name="start" type="text" class={inputClass} placeholder="Select date start" />
+      <input bind:this={inputElement} type="text" class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(color)} {inputClass}" {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} on:focus={() => (isOpen = true)} on:input={handleInputChange} on:keydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />
+      <button type="button" class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-none" on:click={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? 'Close date picker' : 'Open date picker'}>
+        <CalendarMonthSolid class="w-5 h-5" />
+      </button>
     </div>
-    <span class="mx-4 text-gray-500">to</span>
-    <div class="relative">
-      <div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
-        <Calendar />
+  {/if}
+
+  {#if isOpen || inline}
+    <div
+      bind:this={calendarRef}
+      id="datepicker-dropdown"
+      class="
+        {inline ? '' : 'absolute z-10 mt-1'}
+        bg-white dark:bg-gray-800 rounded-md shadow-lg"
+      transition:fade={{ duration: 100 }}
+      role="dialog"
+      aria-label="Calendar">
+      <div class="p-4" role="application">
+        {#if title}
+          <h2 class="text-lg font-semibold mb-4 dark:text-white">{title}</h2>
+        {/if}
+        <div class="flex items-center justify-between mb-4">
+          <Button on:click={() => changeMonth(-1)} {color} size="sm" aria-label="Previous month">
+            <ChevronLeftOutline class="w-4 h-4" />
+          </Button>
+          <h3 class="text-lg font-semibold dark:text-white" aria-live="polite">
+            {currentMonth.toLocaleString(locale, { month: 'long', year: 'numeric' })}
+          </h3>
+          <Button on:click={() => changeMonth(1)} {color} size="sm" aria-label="Next month">
+            <ChevronRightOutline class="w-4 h-4" />
+          </Button>
+        </div>
+        <div class="grid grid-cols-7 gap-1" role="grid">
+          {#each weekdays as day}
+            <div class="text-center text-sm font-medium text-gray-500 dark:text-gray-400" role="columnheader">{day}</div>
+          {/each}
+          {#each daysInMonth as day}
+            <Button color={isSelected(day) ? color : 'alternative'} size="sm" class="w-full h-8 {day.getMonth() !== currentMonth.getMonth() ? 'text-gray-300 dark:text-gray-600' : ''} {isToday(day) ? 'font-bold' : ''} {isInRange(day) ? getRangeBackgroundClass(color) : ''}" on:click={() => handleDaySelect(day)} on:keydown={handleCalendarKeydown} aria-label={day.toLocaleDateString(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })} aria-selected={isSelected(day)} role="gridcell">
+              {day.getDate()}
+            </Button>
+          {/each}
+        </div>
+        {#if showActionButtons}
+          <div class="mt-4 flex justify-between">
+            <Button on:click={handleToday} {color} size="sm">Today</Button>
+            <Button on:click={handleClear} color="red" size="sm">Clear</Button>
+            <Button on:click={handleApply} {color} size="sm">Apply</Button>
+          </div>
+        {/if}
       </div>
-      <input name="end" type="text" class={inputClass} placeholder="Select date end" />
-    </div>
-  </div>
-{:else}
-  <div class="relative">
-    <div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
-      <Calendar />
     </div>
-    {#if datepickerButtons}
-      <input {...$$restProps} datepicker datepicker-buttons datepicker-format={datepickerFormat} datepicker-orientation={datepickerOrientation} datepicker-title={datepickerTitle} use:setAttribute={attribute} type="text" class={inputClass} placeholder="Select date" />
-    {:else}
-      <input {...$$restProps} datepicker datepicker-format={datepickerFormat} datepicker-orientation={datepickerOrientation} datepicker-title={datepickerTitle} use:setAttribute={attribute} type="text" class={inputClass} placeholder="Select date" />
-    {/if}
-    <slot />
-  </div>
-{/if}
+  {/if}
+</div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
+@prop export let value: Date | null = null;
+@prop export let defaultDate: Date | null = null;
 @prop export let range: boolean = false;
-@prop export let autoHide: boolean = false;
-@prop export let datepickerButtons: boolean = false;
-@prop export let datepickerFormat: string = 'mm/dd/yyyy';
-@prop export let datepickerOrientation: string = 'bottom';
-@prop export let datepickerTitle: string = 'Flowbite datepicker';
-@prop export let attribute: string = '';
-@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+@prop export let rangeFrom: Date | null = null;
+@prop export let rangeTo: Date | null = null;
+@prop export let locale: string = 'default';
+@prop export let firstDayOfWeek: number = 0;
+@prop export let dateFormat: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+@prop export let placeholder: string = 'Select date';
+@prop export let disabled: boolean = false;
+@prop export let required: boolean = false;
+@prop export let inputClass: string = '';
+@prop export let color: Button['color'] = 'primary';
+@prop export let inline: boolean = false;
+@prop export let autohide: boolean = true;
+@prop export let showActionButtons: boolean = false;
+@prop export let title: string = '';
 -->

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -1,32 +1,33 @@
 import { SvelteComponentTyped } from "svelte";
-declare module 'svelte/elements' {
-    interface HTMLAttributes<T> {
-        [x: `data-${string}`]: any;
-        'date-rangepicker'?: boolean;
-        datepicker?: boolean;
-        'datepicker-buttons'?: boolean;
-        'datepicker-format'?: string;
-        'datepicker-orientation'?: string;
-        'datepicker-title'?: string;
-    }
-}
+import { Button } from '..';
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        range?: boolean | undefined;
-        datepickerButtons?: boolean | undefined;
-        datepickerFormat?: string | undefined;
-        datepickerOrientation?: string | undefined;
-        datepickerTitle?: string | undefined;
-        attribute?: string | undefined;
-        inputClass?: string | undefined;
+        value?: Date | null;
+        defaultDate?: Date | null;
+        range?: boolean;
+        rangeFrom?: Date | null;
+        rangeTo?: Date | null;
+        locale?: string;
+        firstDayOfWeek?: number;
+        dateFormat?: Intl.DateTimeFormatOptions;
+        placeholder?: string;
+        disabled?: boolean;
+        required?: boolean;
+        inputClass?: string;
+        color?: Button["color"];
+        inline?: boolean;
+        autohide?: boolean;
+        showActionButtons?: boolean;
+        title?: string;
     };
     events: {
+        select: CustomEvent<any>;
+        clear: CustomEvent<any>;
+        apply: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type DatepickerProps = typeof __propDef.props;
 export type DatepickerEvents = typeof __propDef.events;
@@ -34,14 +35,23 @@ export type DatepickerSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
+ * @prop export let value: Date | null = null;
+ * @prop export let defaultDate: Date | null = null;
  * @prop export let range: boolean = false;
- * @prop export let autoHide: boolean = false;
- * @prop export let datepickerButtons: boolean = false;
- * @prop export let datepickerFormat: string = 'mm/dd/yyyy';
- * @prop export let datepickerOrientation: string = 'bottom';
- * @prop export let datepickerTitle: string = 'Flowbite datepicker';
- * @prop export let attribute: string = '';
- * @prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+ * @prop export let rangeFrom: Date | null = null;
+ * @prop export let rangeTo: Date | null = null;
+ * @prop export let locale: string = 'default';
+ * @prop export let firstDayOfWeek: number = 0;
+ * @prop export let dateFormat: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+ * @prop export let placeholder: string = 'Select date';
+ * @prop export let disabled: boolean = false;
+ * @prop export let required: boolean = false;
+ * @prop export let inputClass: string = '';
+ * @prop export let color: Button['color'] = 'primary';
+ * @prop export let inline: boolean = false;
+ * @prop export let autohide: boolean = true;
+ * @prop export let showActionButtons: boolean = false;
+ * @prop export let title: string = '';
  */
 export default class Datepicker extends SvelteComponentTyped<DatepickerProps, DatepickerEvents, DatepickerSlots> {
 }

package/dist/footer/FooterLinkGroup.svelte

@@ -2,7 +2,7 @@
 export let ulClass = "text-gray-600 dark:text-gray-400";
 </script>
 
-<ul class={twMerge(ulClass, $$props.class)} {...$$restProps}>
+<ul {...$$restProps} class={twMerge(ulClass, $$props.class)} >
   <slot />
 </ul>
 

package/dist/forms/CheckboxButton.svelte

@@ -9,27 +9,29 @@ export let outline = false;
 export let size = void 0;
 export let color = void 0;
 export let shadow = false;
-function init(_, _group) {
-  if (checked === void 0) checked = _group.includes(value);
-  onChange();
-  return {
-    update(_group2) {
+function init(node, _group) {
+  function update(_group2) {
+    if (_group2 && value !== void 0) {
       checked = _group2.includes(value);
     }
-  };
+  }
+  update(_group);
+  return { update };
 }
 function onChange() {
-  const index = group.indexOf(value);
-  if (checked === void 0) checked = index >= 0;
-  if (checked) {
-    if (index < 0) {
-      group.push(value);
-      group = group;
-    }
-  } else {
-    if (index >= 0) {
-      group.splice(index, 1);
-      group = group;
+  if (group && value !== void 0) {
+    const index = group.indexOf(value);
+    if (checked === void 0) checked = index >= 0;
+    if (checked) {
+      if (index < 0) {
+        group.push(value);
+        group = group;
+      }
+    } else {
+      if (index >= 0) {
+        group.splice(index, 1);
+        group = group;
+      }
     }
   }
 }
@@ -42,7 +44,7 @@ $: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
     use:init={group}
     type="checkbox"
     bind:checked
-    {value}
+    value={value !== undefined ? value : 'on'}
     {...$$restProps}
     class="sr-only"
     on:keyup

package/dist/forms/CheckboxButton.svelte.d.ts

@@ -23,14 +23,14 @@ declare const __propDef: {
         disabled?: import("svelte/elements").HTMLButtonAttributes["disabled"];
         type?: import("svelte/elements").HTMLButtonAttributes["type"];
     })) & {
-        group: (string | number)[];
-        value: string | number;
+        group?: (string | number)[];
+        value?: string | number;
         checked?: boolean;
         inline?: boolean;
         pill?: boolean;
         outline?: boolean;
-        size?: SizeType | undefined;
-        color?: ButtonColorType | undefined;
+        size?: SizeType;
+        color?: ButtonColorType;
         shadow?: boolean;
     };
     events: {

package/dist/forms/Fileupload.svelte

@@ -1,19 +1,17 @@
 <script>import { twMerge } from "tailwind-merge";
 import Input from "./Input.svelte";
-export let value = "";
 export let files = void 0;
 export let inputClass = "border !p-0 dark:text-gray-400";
 </script>
 
 <Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
-  <input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:value bind:files {...props} />
+  <input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:files {...props} />
 </Input>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let value: $$Props['value'] = '';
 @prop export let files: $$Props['files'] = undefined;
 @prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
 -->

package/dist/forms/Fileupload.svelte.d.ts

@@ -9,8 +9,7 @@ declare const __propDef: {
         color?: "base" | "green" | "red";
         floatClass?: string;
     } & {
-        value: string;
-        files: FileList | undefined;
+        files?: FileList | undefined;
         inputClass?: string;
     };
     events: {
@@ -36,7 +35,6 @@ export type FileuploadSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let value: $$Props['value'] = '';
  * @prop export let files: $$Props['files'] = undefined;
  * @prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
  */

package/dist/forms/Input.svelte

@@ -51,7 +51,7 @@ const clearAll = (e) => {
 };
 </script>
 
-<Wrapper class="relative w-full" show>
+<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
   {#if $$slots.left}
     <div class="{twMerge(floatClass, $$props.classLeft)} start-0 ps-2.5 pointer-events-none">
       <slot name="left" />
@@ -60,14 +60,14 @@ const clearAll = (e) => {
   <slot props={{ ...$$restProps, class: inputClass }}>
     <input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
   </slot>
+  {#if $$slots.right}
   <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5">
-    {#if $$slots.right}
-      <slot name="right"></slot>
-    {/if}
-    {#if clearable && value && `${value}`.length > 0}
-      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
-    {/if}
+    <slot name="right"></slot>
   </div>
+  {/if}
+  {#if clearable && value && `${value}`.length > 0}
+    <CloseButton {size} on:click={clearAll} color="none" class=" {twMerge(floatClass, $$props.classRight)} focus:ring-0 end-6 focus:ring-gray-400 dark:text-white" />
+  {/if}
 </Wrapper>
 
 <!--

package/dist/indicators/Indicator.svelte

@@ -57,7 +57,7 @@ let dotClass;
 $: dotClass = twMerge("flex-shrink-0", rounded ? "rounded" : "rounded-full", border && "border-2 border-white dark:border-gray-800", sizes[size], colors[color], $$slots.default && "inline-flex items-center justify-center", placement && "absolute " + placements[placement], placement && offset && offsets[placement], $$props.class);
 </script>
 
-<div class={dotClass} {...$$restProps}><slot /></div>
+<div {...$$restProps} class={dotClass} ><slot /></div>
 
 <!--
 @component

package/dist/navbar/NavContainer.svelte

@@ -2,7 +2,7 @@
 export let fluid = false;
 </script>
 
-<div class={twMerge('mx-auto flex flex-wrap justify-between items-center ', fluid ? 'w-full' : 'container', $$props.class)} {...$$restProps}>
+<div {...$$restProps} class={twMerge('mx-auto flex flex-wrap justify-between items-center ', fluid ? 'w-full' : 'container', $$props.class)} >
   <slot />
 </div>
 

package/dist/table/TableBody.svelte

@@ -8,7 +8,7 @@ let sorter = getContext("sorter");
 $: sorted = $sorter ? filtered.toSorted((a, b) => $sorter.sortDirection * $sorter.sort(a, b)) : filtered;
 </script>
 
-<tbody class={tableBodyClass} {...$$restProps}>
+<tbody {...$$restProps} class={tableBodyClass}>
   <slot />
   {#each sorted as item}
     <slot name="row" {item} />

package/dist/tabs/Tabs.svelte

@@ -37,7 +37,7 @@ function init(node) {
 $: ulClass = twMerge(defaultClass, tabStyle === "underline" && "-mb-px", $$props.class);
 </script>
 
-<ul class={ulClass} {...$$restProps}>
+<ul {...$$restProps} class={ulClass}>
   <slot {tabStyle}></slot>
 </ul>
 {#if divider}

package/dist/timeline/Group.svelte

@@ -10,7 +10,7 @@ let olCls = twMerge(olClass, $$props.classOl);
 
 <div class={divCls}>
   <time class={timeCls}>{date}</time>
-  <ol class={olCls} {...$$restProps}>
+  <ol {...$$restProps} class={olCls}>
     <slot />
   </ol>
 </div>

package/dist/timeline/Timeline.svelte

@@ -11,7 +11,7 @@ let olClasses = {
 };
 </script>
 
-<ol class={twMerge(olClasses[order], $$props.class)} {...$$restProps}>
+<ol {...$$restProps} class={twMerge(olClasses[order], $$props.class)} >
   <slot />
 </ol>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.22",
+  "version": "0.47.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -12,12 +12,12 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@changesets/cli": "^2.27.8",
+    "@changesets/cli": "2.27.9",
     "@docsearch/css": "^3.6.2",
     "@docsearch/js": "^3.6.2",
-    "@playwright/test": "^1.47.2",
-    "@sveltejs/adapter-vercel": "^5.4.4",
-    "@sveltejs/kit": "^2.6.1",
+    "@playwright/test": "^1.48.0",
+    "@sveltejs/adapter-vercel": "^5.4.5",
+    "@sveltejs/kit": "^2.6.3",
     "@sveltejs/package": "2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
@@ -25,12 +25,11 @@
     "autoprefixer": "^10.4.20",
     "dayjs": "^1.11.13",
     "esbuild": "0.23.1",
-    "eslint": "^9.11.1",
+    "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.44.1",
-    "flowbite-svelte": "^0.46.22",
-    "flowbite-svelte-blocks": "^1.1.3",
+    "eslint-plugin-svelte": "^2.45.0",
     "flowbite-svelte-icons": "^1.6.1",
+    "globals": "^15.11.0",
     "mdsvex": "^0.12.3",
     "mdsvexamples": "^0.4.1",
     "postcss": "^8.4.47",
@@ -40,14 +39,14 @@
     "publint": "^0.2.11",
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.4",
-    "svelte-lib-helpers": "^0.4.9",
+    "svelte-lib-helpers": "^0.4.16",
     "svelte-meta-tags": "^3.1.4",
     "svelte-preprocess": "^6.0.3",
     "svelte2tsx": "^0.7.21",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.4.13",
     "tslib": "^2.7.0",
-    "typescript": "^5.6.2",
+    "typescript": "^5.6.3",
     "typescript-eslint": "8.4.0",
     "vite": "^5.4.8",
     "vitest": "^1.6.0"
@@ -102,7 +101,7 @@
     "@floating-ui/dom": "^1.6.11",
     "apexcharts": "^3.54.0",
     "flowbite": "^2.5.2",
-    "tailwind-merge": "^2.5.2"
+    "tailwind-merge": "^2.5.3"
   },
   "engines": {
     "pnpm": ">=8.0.0",
@@ -220,10 +219,6 @@
       "types": "./dist/darkmode/DarkMode.svelte.d.ts",
       "svelte": "./dist/darkmode/DarkMode.svelte"
     },
-    "./Calender.svelte": {
-      "types": "./dist/datepicker/Calender.svelte.d.ts",
-      "svelte": "./dist/datepicker/Calender.svelte"
-    },
     "./Datepicker.svelte": {
       "types": "./dist/datepicker/Datepicker.svelte.d.ts",
       "svelte": "./dist/datepicker/Datepicker.svelte"

package/dist/datepicker/Calender.svelte

@@ -1,3 +0,0 @@
-<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
-</svg>

package/dist/datepicker/Calender.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  CalenderProps */
-/** @typedef {typeof __propDef.events}  CalenderEvents */
-/** @typedef {typeof __propDef.slots}  CalenderSlots */
-export default class Calender extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CalenderProps = typeof __propDef.props;
-export type CalenderEvents = typeof __propDef.events;
-export type CalenderSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};