flowbite-svelte 0.46.23 → 0.47.1

package/README.md

@@ -174,7 +174,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/experimental/datepicker">
+        <a href="https://flowbite-svelte.com/docs/components/datepicker">
             <img alt="Svelte Datepicker" src="https://flowbite.s3.amazonaws.com/github/svelte/datepicker.jpg">
         </a>
     </td>

package/dist/avatar/Avatar.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLDivElement> & {
+    props: {
         href?: string;
         src?: string;
         rounded?: boolean;
@@ -10,7 +10,7 @@ declare const __propDef: {
         dot?: object | undefined;
         alt?: string;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "none";
-    };
+    } & (HTMLAnchorAttributes | HTMLAttributes<HTMLDivElement>);
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -18,7 +18,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type AvatarProps = typeof __propDef.props;
+type AvatarProps_ = typeof __propDef.props;
+export { AvatarProps_ as AvatarProps };
 export type AvatarEvents = typeof __propDef.events;
 export type AvatarSlots = typeof __propDef.slots;
 /**
@@ -33,6 +34,5 @@ export type AvatarSlots = typeof __propDef.slots;
  * @prop export let alt: $$Props['alt'] = '';
  * @prop export let size: NonNullable<$$Props['size']> = 'md';
  */
-export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
+export default class Avatar extends SvelteComponentTyped<AvatarProps_, AvatarEvents, AvatarSlots> {
 }
-export {};

package/dist/datepicker/Datepicker.svelte

@@ -1,65 +1,292 @@
-<script context="module"></script>
-
-<script>import Calendar from "./Calender.svelte";
+<script>import { createEventDispatcher, onMount } from "svelte";
+import { fade } from "svelte/transition";
+import { Button } from "..";
+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'}>
+        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
+        </svg>
+      </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">
+            <svg class="w-3 h-3 rtl:rotate-180 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"></path></svg>
+          </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">
+            <svg class="w-3 h-3 rtl:rotate-180 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path></svg>
+          </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/drawer/Drawer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+import type { drawerTransitionParamTypes, TransitionTypes } from '../types';
 import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: HTMLAttributes<HTMLElement> & {
@@ -18,7 +18,7 @@ declare const __propDef: {
         id?: string;
         divClass?: string;
         transitionParams?: drawerTransitionParamTypes;
-        transitionType?: drawerTransitionTypes;
+        transitionType?: TransitionTypes;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/dropdown/DropdownItem.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    props: {
         defaultClass?: string;
         href?: string;
         activeClass?: string;
-    };
+    } & (HTMLAnchorAttributes | HTMLButtonAttributes);
     events: {
         click: MouseEvent;
         change: Event;
@@ -22,7 +22,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type DropdownItemProps = typeof __propDef.props;
+type DropdownItemProps_ = typeof __propDef.props;
+export { DropdownItemProps_ as DropdownItemProps };
 export type DropdownItemEvents = typeof __propDef.events;
 export type DropdownItemSlots = typeof __propDef.slots;
 /**
@@ -33,6 +34,5 @@ export type DropdownItemSlots = typeof __propDef.slots;
  * @prop export let activeClass: $$Props['activeClass'] = undefined;
  * @prop export let active: boolean = false;
  */
-export default class DropdownItem extends SvelteComponentTyped<DropdownItemProps, DropdownItemEvents, DropdownItemSlots> {
+export default class DropdownItem extends SvelteComponentTyped<DropdownItemProps_, DropdownItemEvents, DropdownItemSlots> {
 }
-export {};

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,7 +9,6 @@ declare const __propDef: {
         color?: "base" | "green" | "red";
         floatClass?: string;
     } & {
-        value?: string;
         files?: FileList | undefined;
         inputClass?: string;
     };
@@ -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/navbar/NavLi.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLDivElement> & {
+    props: {
         href?: string;
         activeClass?: string;
         nonActiveClass?: string;
-    };
+    } & (HTMLAnchorAttributes | HTMLAttributes<HTMLDivElement>);
     events: {
         blur: FocusEvent;
         change: Event;
@@ -24,7 +24,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type NavLiProps = typeof __propDef.props;
+type NavLiProps_ = typeof __propDef.props;
+export { NavLiProps_ as NavLiProps };
 export type NavLiEvents = typeof __propDef.events;
 export type NavLiSlots = typeof __propDef.slots;
 /**
@@ -34,6 +35,5 @@ export type NavLiSlots = typeof __propDef.slots;
  * @prop export let activeClass: $$Props['activeClass'] = undefined;
  * @prop export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
  */
-export default class NavLi extends SvelteComponentTyped<NavLiProps, NavLiEvents, NavLiSlots> {
+export default class NavLi extends SvelteComponentTyped<NavLiProps_, NavLiEvents, NavLiSlots> {
 }
-export {};

package/dist/pagination/PaginationItem.svelte.d.ts

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    props: {
         href?: string;
         active?: boolean;
         activeClass?: string;
         normalClass?: string;
         large?: boolean;
-    };
+    } & (HTMLAnchorAttributes | HTMLButtonAttributes);
     events: {
         blur: FocusEvent;
         change: Event;
@@ -26,7 +26,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type PaginationItemProps = typeof __propDef.props;
+type PaginationItemProps_ = typeof __propDef.props;
+export { PaginationItemProps_ as PaginationItemProps };
 export type PaginationItemEvents = typeof __propDef.events;
 export type PaginationItemSlots = typeof __propDef.slots;
 /**
@@ -38,6 +39,5 @@ export type PaginationItemSlots = typeof __propDef.slots;
  * @prop export let normalClass: $$Props['normalClass'] = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
  * @prop export let large: $$Props['large'] = false;
  */
-export default class PaginationItem extends SvelteComponentTyped<PaginationItemProps, PaginationItemEvents, PaginationItemSlots> {
+export default class PaginationItem extends SvelteComponentTyped<PaginationItemProps_, PaginationItemEvents, PaginationItemSlots> {
 }
-export {};

package/dist/types.d.ts

@@ -1,6 +1,5 @@
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonColorType = 'alternative' | 'blue' | 'dark' | 'green' | 'light' | 'primary' | 'purple' | 'red' | 'yellow' | 'none';
 export type CheckboxItem = {
     value: string;
@@ -8,7 +7,6 @@ export type CheckboxItem = {
     isChecked?: boolean;
 };
 export type ColorVariant = 'dark' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none';
-export type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom' | 'primary' | 'secondary';
 export type ImgType = {
     src: string;
     alt?: string;
@@ -16,14 +14,11 @@ export type ImgType = {
 export type IndicatorColorType = 'gray' | 'dark' | 'blue' | 'green' | 'red' | 'purple' | 'indigo' | 'yellow' | 'teal' | 'none';
 export type IndicatorPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | undefined;
 export type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
-export type drawerTransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur' | undefined;
 export type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange' | 'primary' | 'secondary';
 export type ModalPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export type PsizeType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
 export type PweightType = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
 export type TableColorType = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'indigo' | 'pink' | 'default' | 'custom';
-export type ToolbarColorType = 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'dark' | 'none';
-export type ToolbarButtonType = 'dark' | 'default' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue';
 export declare const xs = "xs";
 export declare const sm = "sm";
 export declare const md = "md";
@@ -90,12 +85,6 @@ export interface LinkType {
     rel?: string;
     active?: boolean;
 }
-export interface NavbarType {
-    name: string;
-    href: string;
-    rel?: string;
-    child?: NavbarType[];
-}
 export interface SiteType {
     name: string;
     href: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.23",
+  "version": "0.47.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -12,23 +12,24 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@changesets/cli": "^2.27.9",
+    "@changesets/cli": "2.27.9",
     "@docsearch/css": "^3.6.2",
     "@docsearch/js": "^3.6.2",
-    "@playwright/test": "^1.48.0",
+    "@playwright/test": "^1.48.1",
     "@sveltejs/adapter-vercel": "^5.4.5",
-    "@sveltejs/kit": "^2.6.3",
+    "@sveltejs/kit": "^2.7.1",
     "@sveltejs/package": "2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
+    "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/eslint": "^8.56.12",
     "autoprefixer": "^10.4.20",
     "dayjs": "^1.11.13",
     "esbuild": "0.23.1",
     "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.44.1",
-    "flowbite-svelte-icons": "^1.6.1",
+    "eslint-plugin-svelte": "^2.45.1",
+    "flowbite-svelte-icons": "^1.6.2",
+    "globals": "^15.11.0",
     "mdsvex": "^0.12.3",
     "mdsvexamples": "^0.4.1",
     "postcss": "^8.4.47",
@@ -37,17 +38,17 @@
     "prism-themes": "^1.9.0",
     "publint": "^0.2.11",
     "svelte": "^4.2.19",
-    "svelte-check": "^4.0.4",
+    "svelte-check": "^4.0.5",
     "svelte-lib-helpers": "^0.4.16",
     "svelte-meta-tags": "^3.1.4",
     "svelte-preprocess": "^6.0.3",
-    "svelte2tsx": "^0.7.21",
+    "svelte2tsx": "^0.7.22",
     "tailwind-merge": "^1.13.1",
-    "tailwindcss": "^3.4.13",
-    "tslib": "^2.7.0",
+    "tailwindcss": "^3.4.14",
+    "tslib": "^2.8.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "8.4.0",
-    "vite": "^5.4.8",
+    "vite": "^5.4.9",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
@@ -98,9 +99,9 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.11",
-    "apexcharts": "^3.54.0",
+    "apexcharts": "^3.54.1",
     "flowbite": "^2.5.2",
-    "tailwind-merge": "^2.5.3"
+    "tailwind-merge": "^2.5.4"
   },
   "engines": {
     "pnpm": ">=8.0.0",
@@ -218,14 +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"
-    },
-    "./DateCalender.svelte": {
-      "types": "./dist/datepicker/DateCalender.svelte.d.ts",
-      "svelte": "./dist/datepicker/DateCalender.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 {};

package/dist/datepicker/DateCalender.svelte

@@ -1,150 +0,0 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Button, Modal } from "..";
-import { ChevronLeftOutline, ChevronRightOutline } from "flowbite-svelte-icons";
-export let currentDate = /* @__PURE__ */ new Date();
-export let open = false;
-export let locale = "default";
-export let firstDayOfWeek = 0;
-export let showToday = true;
-export let showClose = true;
-export let dateFormat = { month: "long", year: "numeric" };
-export let dayLabelFormat = "short";
-export let customClass = "";
-export let primaryColor = "blue";
-export let secondaryColor = "gray";
-const dispatch = createEventDispatcher();
-let currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
-let daysInMonth = getDaysInMonth(currentMonth);
-function getDaysInMonth(date) {
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const firstDay = new Date(year, month, 1);
-  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++) {
-    const prevMonthDay = new Date(year, month, -i);
-    daysArray.unshift(prevMonthDay);
-  }
-  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 changeMonth(increment) {
-  currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + increment, 1);
-  daysInMonth = getDaysInMonth(currentMonth);
-}
-function handleDaySelect(day) {
-  dispatch("selectDay", day);
-  open = false;
-}
-function isCurrentMonth(day) {
-  return day.getMonth() === currentMonth.getMonth();
-}
-function handleClose() {
-  open = false;
-  dispatch("close");
-}
-function goToToday() {
-  const today = /* @__PURE__ */ new Date();
-  currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-  daysInMonth = getDaysInMonth(currentMonth);
-  currentDate = today;
-  handleDaySelect(today);
-}
-function isToday(day) {
-  const today = /* @__PURE__ */ new Date();
-  return day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear();
-}
-$: weekdays = [...Array(7)].map((_, i) => {
-  const day = new Date(2021, 5, i + firstDayOfWeek);
-  return day.toLocaleString(locale, { weekday: dayLabelFormat });
-});
-export function setDate(date) {
-  currentDate = date;
-  currentMonth = new Date(date.getFullYear(), date.getMonth(), 1);
-  daysInMonth = getDaysInMonth(currentMonth);
-}
-export function nextMonth() {
-  changeMonth(1);
-}
-export function previousMonth() {
-  changeMonth(-1);
-}
-export function setMonth(month) {
-  currentMonth = new Date(currentMonth.getFullYear(), month, 1);
-  daysInMonth = getDaysInMonth(currentMonth);
-}
-export function setYear(year) {
-  currentMonth = new Date(year, currentMonth.getMonth(), 1);
-  daysInMonth = getDaysInMonth(currentMonth);
-}
-</script>
-
-<Modal bind:open size="xs" autoclose={false} class={`w-full ${customClass}`}>
-	<div class="w-full max-w-md rounded-lg p-6">
-		<div class="mb-4 flex items-center justify-between">
-			<Button size="sm" on:click={() => changeMonth(-1)} color={primaryColor}>
-				<ChevronLeftOutline size="md" />
-			</Button>
-			<span class="text-lg font-semibold">
-				{currentMonth.toLocaleString(locale, dateFormat)}
-			</span>
-			<Button size="sm" on:click={() => changeMonth(1)} color={primaryColor}>
-				<ChevronRightOutline size="md" />
-			</Button>
-		</div>
-		<div class="grid grid-cols-7 gap-2">
-			{#each weekdays as day}
-				<div class="text-center text-sm font-medium">{day}</div>
-			{/each}
-			{#each daysInMonth as day}
-				<Button
-					size="sm"
-					color={currentDate.toDateString() === day.toDateString()
-						? primaryColor
-						: isToday(day)
-							? secondaryColor
-							: 'alternative'}
-					class={!isCurrentMonth(day) ? 'opacity-50' : ''}
-					on:click={() => handleDaySelect(day)}
-				>
-					{day.getDate()}
-				</Button>
-			{/each}
-		</div>
-		<div class="mt-4 flex justify-between">
-			{#if showToday}
-				<Button size="sm" color={primaryColor} on:click={goToToday}>Today</Button>
-			{/if}
-			{#if showClose}
-				<Button size="sm" color={primaryColor} on:click={handleClose}>Close</Button>
-			{/if}
-		</div>
-	</div>
-</Modal>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let currentDate: Date = new Date();
-@prop export let open = false;
-@prop export let locale: string = 'default';
-@prop export let firstDayOfWeek: number = 0;
-@prop export let showToday: boolean = true;
-@prop export let showClose: boolean = true;
-@prop export let dateFormat: Intl.DateTimeFormatOptions = { month: 'long', year: 'numeric' };
-@prop export let dayLabelFormat: 'short' | 'narrow' | 'long' = 'short';
-@prop export let customClass: string = '';
-@prop export let primaryColor: Button['color'] = 'blue';
-@prop export let secondaryColor: string = 'gray';
--->

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

@@ -1,55 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { Button } from '..';
-declare const __propDef: {
-    props: {
-        currentDate?: Date;
-        open?: boolean;
-        locale?: string;
-        firstDayOfWeek?: number;
-        showToday?: boolean;
-        showClose?: boolean;
-        dateFormat?: Intl.DateTimeFormatOptions;
-        dayLabelFormat?: "short" | "narrow" | "long";
-        customClass?: string;
-        primaryColor?: Button["color"];
-        secondaryColor?: string;
-        setDate?: (date: Date) => void;
-        nextMonth?: () => void;
-        previousMonth?: () => void;
-        setMonth?: (month: number) => void;
-        setYear?: (year: number) => void;
-    };
-    events: {
-        selectDay: CustomEvent<any>;
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DateCalenderProps = typeof __propDef.props;
-export type DateCalenderEvents = typeof __propDef.events;
-export type DateCalenderSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let currentDate: Date = new Date();
- * @prop export let open = false;
- * @prop export let locale: string = 'default';
- * @prop export let firstDayOfWeek: number = 0;
- * @prop export let showToday: boolean = true;
- * @prop export let showClose: boolean = true;
- * @prop export let dateFormat: Intl.DateTimeFormatOptions = { month: 'long', year: 'numeric' };
- * @prop export let dayLabelFormat: 'short' | 'narrow' | 'long' = 'short';
- * @prop export let customClass: string = '';
- * @prop export let primaryColor: Button['color'] = 'blue';
- * @prop export let secondaryColor: string = 'gray';
- */
-export default class DateCalender extends SvelteComponentTyped<DateCalenderProps, DateCalenderEvents, DateCalenderSlots> {
-    get setDate(): (date: Date) => void;
-    get nextMonth(): () => void;
-    get previousMonth(): () => void;
-    get setMonth(): (month: number) => void;
-    get setYear(): (year: number) => void;
-}
-export {};