flowbite-svelte 0.48.3 → 0.48.5

package/README.md

@@ -4,6 +4,14 @@
 
 **⚠️ Flowbite Svelte is currently in early development and APIs and packages are likely to change quite often.**
 
+---
+
+> [!IMPORTANT] This repo is fairly stable implementation in Svelte 4. It is however build on TailwindCss v4. The maintenance of that repo is now limited.
+>
+> There is early stage re-implementation of that library in Svelte 5 available at [flowbite-svelte-next](https://github.com/themesberg/flowbite-svelte-next). If you interested in trying it out, please go ahead and do give us the feedback by creating the issues in that new repo.
+
+---
+
 <p>
     <a href="https://flowbite-svelte.com" >
       <img alt="Flowbite Svelte UI components" width="350" src="https://raw.githubusercontent.com/themesberg/flowbite-svelte/main/static/images/flowbite-svelte.png">

package/dist/badge/Badge.svelte

@@ -94,4 +94,5 @@ $: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", border ? `bord
 @prop export let rounded: $$Props['rounded'] = false;
 @prop export let transition: NonNullable<$$Props['transition']> = fade;
 @prop export let params: $$Props['params'] = {};
+@prop export let tag: $$Props['tag'] = 'div';
 -->

package/dist/badge/Badge.svelte.d.ts

@@ -40,6 +40,7 @@ export type BadgeSlots = typeof __propDef.slots;
  * @prop export let rounded: $$Props['rounded'] = false;
  * @prop export let transition: NonNullable<$$Props['transition']> = fade;
  * @prop export let params: $$Props['params'] = {};
+ * @prop export let tag: $$Props['tag'] = 'div';
  */
 export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
 }

package/dist/datepicker/Datepicker.svelte

@@ -243,7 +243,7 @@ function handleApply() {
           <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">
+          <h3 class="text-lg font-semibold text-gray-900 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">

package/dist/drawer/Drawer.svelte

@@ -71,6 +71,7 @@ function clickOutsideWrapper(node, callback) {
 @prop export let bottomOffset: $$Props['bottomOffset'] = 'inset-x-0 bottom-0';
 @prop export let width: $$Props['width'] = 'w-80';
 @prop export let backdrop: $$Props['backdrop'] = true;
+@prop export let backdropClass: $$Props['backdropClass'] = '';
 @prop export let bgColor: $$Props['bgColor'] = 'bg-gray-900';
 @prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-black/75';
 @prop export let placement: NonNullable<$$Props['placement']> = 'left';

package/dist/drawer/Drawer.svelte.d.ts

@@ -45,6 +45,7 @@ export type DrawerSlots = typeof __propDef.slots;
  * @prop export let bottomOffset: $$Props['bottomOffset'] = 'inset-x-0 bottom-0';
  * @prop export let width: $$Props['width'] = 'w-80';
  * @prop export let backdrop: $$Props['backdrop'] = true;
+ * @prop export let backdropClass: $$Props['backdropClass'] = '';
  * @prop export let bgColor: $$Props['bgColor'] = 'bg-gray-900';
  * @prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-black/75';
  * @prop export let placement: NonNullable<$$Props['placement']> = 'left';

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         floatClass?: string;
         classLeft?: string;
         classRight?: string;
+        wrapperClass?: string;
     } & {
         files?: FileList | undefined;
         inputClass?: string;

package/dist/forms/Input.svelte

@@ -16,6 +16,7 @@ export let color = "base";
 export let floatClass = "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400";
 export let classLeft = "";
 export let classRight = "";
+export let wrapperClass = "relative w-auto";
 const dispatcher = createEventDispatcher();
 const borderClasses = {
   base: "border border-gray-300 dark:border-gray-600",
@@ -53,7 +54,7 @@ const clearAll = (e) => {
 };
 </script>
 
-<Wrapper class="relative w-full" show={$$slots.left || $$slots.right || clearable}>
+<Wrapper class={wrapperClass} show={$$slots.left || $$slots.right || !!clearable}>
   {#if $$slots.left}
     <div class="{twMerge(floatClass, classLeft)} start-0 ps-2.5 pointer-events-none">
       <slot name="left" />
@@ -63,12 +64,12 @@ const clearAll = (e) => {
     <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, classRight)} end-0 pe-2.5">
-    <slot name="right"></slot>
-  </div>
+    <div class="{twMerge(floatClass, classRight)} end-0 pe-2.5">
+      <slot name="right"></slot>
+    </div>
   {/if}
   {#if clearable && value && `${value}`.length > 0}
-    <CloseButton {size} on:click={clearAll} color="none" class=" {twMerge(floatClass, classRight)} focus:ring-0 end-1 focus:ring-gray-400 dark:text-white" />
+    <CloseButton {size} on:click={clearAll} color="none" class="{twMerge(floatClass, classRight)} focus:ring-0 end-1" tabindex={-1} />
   {/if}
 </Wrapper>
 
@@ -85,4 +86,5 @@ const clearAll = (e) => {
 @prop export let floatClass: $$Props['floatClass'] = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
 @prop export let classLeft: $$Props['classLeft'] = '';
 @prop export let classRight: $$Props['classRight'] = '';
+@prop export let wrapperClass: $$Props['wrapperClass'] = 'relative w-auto';
 -->

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

@@ -14,6 +14,7 @@ declare const __propDef: {
         floatClass?: string;
         classLeft?: string;
         classRight?: string;
+        wrapperClass?: string;
     };
     events: {
         blur: FocusEvent;
@@ -57,6 +58,7 @@ export type InputSlots = typeof __propDef.slots;
  * @prop export let floatClass: $$Props['floatClass'] = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
  * @prop export let classLeft: $$Props['classLeft'] = '';
  * @prop export let classRight: $$Props['classRight'] = '';
+ * @prop export let wrapperClass: $$Props['wrapperClass'] = 'relative w-auto';
  */
 export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
 }

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         floatClass?: string;
         classLeft?: string;
         classRight?: string;
+        wrapperClass?: string;
     } & {
         value?: number;
     };

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         floatClass?: string;
         classLeft?: string;
         classRight?: string;
+        wrapperClass?: string;
     } & {
         size?: FormSizeType;
         placeholder?: string;

package/dist/forms/Timepicker.svelte

@@ -0,0 +1,209 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, InputAddon, Label, Toggle } from "..";
+export let id = "time";
+export let endId = "end-time";
+export let value = "00:00";
+export let endValue = "00:00";
+export let min = "";
+export let max = "";
+export let required = true;
+export let disabled = false;
+export let color = "base";
+export let buttonColor = "primary";
+export let icon;
+export let type = "default";
+export let optionLabel = "Options";
+export let options = [];
+export let selectedOption = "";
+export let size = "md";
+export let divClass = "inline-flex rounded-lg shadow-sm";
+export let inputClass = "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none p-2.5 border-r-0";
+export let selectClass = "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-r-lg focus:ring-0 focus:outline-none block w-full p-2.5 border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500";
+export let timerangeLabel = "Choose time range";
+export let timerangeButtonLabel = "Save time";
+export let timeIntervals = [];
+export let columns = 2;
+let dropdownOpen = false;
+let showTimerange = false;
+const dispatch = createEventDispatcher();
+function timeToMinutes(time) {
+  const [hours, minutes] = time.split(":").map(Number);
+  return hours * 60 + minutes;
+}
+function handleTimeChange(event, isEndTime = false) {
+  const newValue = event.target.value;
+  const newMinutes = timeToMinutes(newValue);
+  const valueMinutes = timeToMinutes(value);
+  const endValueMinutes = timeToMinutes(endValue);
+  if (isEndTime) {
+    [value, endValue] = newMinutes < valueMinutes ? [newValue, value] : [value, newValue];
+  } else {
+    [value, endValue] = newMinutes > endValueMinutes ? [endValue, newValue] : [newValue, endValue];
+  }
+  if (type !== "timerange-dropdown") {
+    dispatchChange();
+  }
+}
+function handleOptionSelect(event) {
+  selectedOption = event.target.value;
+  dispatchChange();
+}
+function handleDropdownSelect(option) {
+  dropdownOpen = false;
+  selectedOption = option.value;
+  dispatchChange();
+}
+function dispatchChange() {
+  dispatch("select", {
+    time: value,
+    endTime: endValue,
+    [optionLabel ? optionLabel.toLowerCase() : "options"]: selectedOption || options[0]?.value || ""
+  });
+}
+function applyTimerange() {
+  dropdownOpen = false;
+  dispatchChange();
+}
+function toggleTimerange() {
+  showTimerange = !showTimerange;
+  if (!showTimerange) {
+    dispatchChange();
+  }
+}
+function handleInlineButtonSelect(time) {
+  value = time;
+  dispatchChange();
+}
+</script>
+
+{#if type !== 'inline-buttons'}
+  <ButtonGroup {size} {divClass}>
+    {#if type === 'default'}
+      <Input {id} {color} type="time" {min} {max} {required} {disabled} defaultClass="{inputClass} rounded-l-lg" bind:value on:change={(e) => handleTimeChange(e)} />
+      <InputAddon class="rounded-r-lg">
+        {#if icon}
+          <svelte:component this={icon} class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+        {:else}
+          <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+          </svg>
+        {/if}
+      </InputAddon>
+    {:else if type === 'select'}
+      <Input {id} {color} type="time" {min} {max} {required} {disabled} defaultClass="{inputClass} rounded-l-lg" bind:value on:change={(e) => handleTimeChange(e)} />
+      <Select defaultClass={selectClass} on:change={handleOptionSelect} items={options} value={selectedOption} />
+    {:else if type === 'dropdown'}
+      <Input {id} {color} type="time" {min} {max} {required} {disabled} defaultClass="{inputClass} rounded-l-lg" bind:value on:change={(e) => handleTimeChange(e)} />
+      <Button color={buttonColor} class="rounded-r-lg">
+        {optionLabel}
+        <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+      </Button>
+      <Dropdown bind:open={dropdownOpen}>
+        {#each options as option}
+          <DropdownItem on:click={() => handleDropdownSelect(option)}>
+            {option.name}
+          </DropdownItem>
+        {/each}
+      </Dropdown>
+    {:else if type === 'range'}
+      <Input {id} {color} type="time" {min} {max} {required} {disabled} defaultClass="{inputClass} rounded-l-lg" bind:value on:change={(e) => handleTimeChange(e)} />
+      <InputAddon class="rounded-none">
+        {#if icon}
+          <svelte:component this={icon} class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+        {:else}
+          <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+          </svg>
+        {/if}
+      </InputAddon>
+      <span class="flex items-center justify-center text-gray-500 dark:text-gray-400 px-2">-</span>
+      <Input id={endId} {color} type="time" {min} {max} {required} {disabled} defaultClass="{inputClass} rounded-none" bind:value={endValue} on:change={(e) => handleTimeChange(e, true)} />
+      <InputAddon class="rounded-r-lg">
+        {#if icon}
+          <svelte:component this={icon} class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+        {:else}
+          <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+          </svg>
+        {/if}
+      </InputAddon>
+    {:else if type === 'timerange-dropdown'}
+      <Button color={buttonColor} {size} class="rounded-r-lg">
+        {timerangeLabel}
+        <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+      </Button>
+      <Dropdown bind:open={dropdownOpen} classContainer="p-4 w-auto last:rounded-r-lg">
+        <div class="flex flex-col space-y-4">
+          <div class="flex space-x-4">
+            <div class="flex flex-col">
+              <Label for={id}>Start time:</Label>
+              <Input {id} {color} type="time" {min} {max} {required} {disabled} defaultClass="{inputClass} rounded-l-lg" bind:value on:change={(e) => handleTimeChange(e)} />
+            </div>
+            <div class="flex flex-col">
+              <Label for={endId}>End time:</Label>
+              <Input id={endId} {color} type="time" {min} {max} {required} {disabled} defaultClass="{inputClass} rounded-l-lg" bind:value={endValue} on:change={(e) => handleTimeChange(e, true)} />
+            </div>
+          </div>
+          <Button color={buttonColor} class="w-full rounded-l-lg" on:click={applyTimerange}>
+            {timerangeButtonLabel}
+          </Button>
+        </div>
+      </Dropdown>
+    {:else if type === 'timerange-toggle'}
+      <div class="flex flex-col space-y-2 w-full">
+        <div class="flex items-center justify-between">
+          <Toggle id={`${id}-timerange-toggle`} checked={showTimerange} on:change={toggleTimerange} />
+        </div>
+        {#if showTimerange}
+          <div class="flex space-x-4">
+            <div class="flex flex-col">
+              <Label for={id}>Start time:</Label>
+              <Input {id} {color} type="time" {min} {max} {required} {disabled} defaultClass="{inputClass} rounded-lg" bind:value on:change={(e) => handleTimeChange(e)} />
+            </div>
+            <div class="flex flex-col">
+              <Label for={endId}>End time:</Label>
+              <Input id={endId} {color} type="time" {min} {max} {required} {disabled} defaultClass="{inputClass} rounded-lg" bind:value={endValue} on:change={(e) => handleTimeChange(e, true)} />
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </ButtonGroup>
+{:else}
+  <div class="grid gap-2 w-full" class:grid-cols-1={columns === 1} class:grid-cols-2={columns === 2} class:grid-cols-3={columns === 3} class:grid-cols-4={columns === 4}>
+    {#each timeIntervals as time}
+      <Button {size} color={value === time ? buttonColor : 'light'} class="rounded-lg" on:click={() => handleInlineButtonSelect(time)}>
+        {time}
+      </Button>
+    {/each}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let id = 'time';
+@prop export let endId = 'end-time';
+@prop export let value = '00:00';
+@prop export let endValue = '00:00';
+@prop export let min = '';
+@prop export let max = '';
+@prop export let required = true;
+@prop export let disabled = false;
+@prop export let color: 'base' | 'red' | 'green' | undefined = 'base';
+@prop export let buttonColor: ButtonColorType = 'primary';
+@prop export let icon: ComponentType;
+@prop export let type: 'default' | 'dropdown' | 'select' | 'range' | 'timerange-dropdown' | 'timerange-toggle' | 'inline-buttons' = 'default';
+@prop export let optionLabel = 'Options';
+@prop export let options: { value: string;
+@prop export let selectedOption = '';
+@prop export let size: 'sm' | 'md' | 'lg' = 'md';
+@prop export let divClass = 'inline-flex rounded-lg shadow-sm';
+@prop export let inputClass = 'block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none p-2.5 border-r-0';
+@prop export let selectClass = 'text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-r-lg focus:ring-0 focus:outline-none block w-full p-2.5 border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+@prop export let timerangeLabel = 'Choose time range';
+@prop export let timerangeButtonLabel = 'Save time';
+@prop export let timeIntervals: string[] = [];
+@prop export let columns: 1 | 2 | 3 | 4 = 2;
+-->

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

@@ -0,0 +1,76 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ButtonColorType } from '../types';
+import type { ComponentType } from 'svelte';
+declare const __propDef: {
+    props: {
+        id?: string;
+        endId?: string;
+        value?: string;
+        endValue?: string;
+        min?: string;
+        max?: string;
+        required?: boolean;
+        disabled?: boolean;
+        color?: "base" | "red" | "green" | undefined;
+        buttonColor?: ButtonColorType;
+        icon: ComponentType;
+        type?: "default" | "dropdown" | "select" | "range" | "timerange-dropdown" | "timerange-toggle" | "inline-buttons";
+        optionLabel?: string;
+        options?: {
+            value: string;
+            name: string;
+        }[];
+        selectedOption?: string;
+        size?: "sm" | "md" | "lg";
+        divClass?: string;
+        inputClass?: string;
+        selectClass?: string;
+        timerangeLabel?: string;
+        timerangeButtonLabel?: string;
+        timeIntervals?: string[];
+        columns?: 1 | 2 | 3 | 4;
+    };
+    events: {
+        select: CustomEvent<{
+            [key: string]: string;
+            time: string;
+            endTime?: string;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TimepickerProps = typeof __propDef.props;
+export type TimepickerEvents = typeof __propDef.events;
+export type TimepickerSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let id = 'time';
+ * @prop export let endId = 'end-time';
+ * @prop export let value = '00:00';
+ * @prop export let endValue = '00:00';
+ * @prop export let min = '';
+ * @prop export let max = '';
+ * @prop export let required = true;
+ * @prop export let disabled = false;
+ * @prop export let color: 'base' | 'red' | 'green' | undefined = 'base';
+ * @prop export let buttonColor: ButtonColorType = 'primary';
+ * @prop export let icon: ComponentType;
+ * @prop export let type: 'default' | 'dropdown' | 'select' | 'range' | 'timerange-dropdown' | 'timerange-toggle' | 'inline-buttons' = 'default';
+ * @prop export let optionLabel = 'Options';
+ * @prop export let options: { value: string;
+ * @prop export let selectedOption = '';
+ * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
+ * @prop export let divClass = 'inline-flex rounded-lg shadow-sm';
+ * @prop export let inputClass = 'block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none p-2.5 border-r-0';
+ * @prop export let selectClass = 'text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-r-lg focus:ring-0 focus:outline-none block w-full p-2.5 border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+ * @prop export let timerangeLabel = 'Choose time range';
+ * @prop export let timerangeButtonLabel = 'Save time';
+ * @prop export let timeIntervals: string[] = [];
+ * @prop export let columns: 1 | 2 | 3 | 4 = 2;
+ */
+export default class Timepicker extends SvelteComponentTyped<TimepickerProps, TimepickerEvents, TimepickerSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -48,6 +48,7 @@ export { default as Range } from "./forms/Range.svelte";
 export { default as Search } from "./forms/Search.svelte";
 export { default as Select } from "./forms/Select.svelte";
 export { default as Textarea } from "./forms/Textarea.svelte";
+export { default as Timepicker } from "./forms/Timepicker.svelte";
 export { default as Toggle } from "./forms/Toggle.svelte";
 export { default as Gallery } from "./gallery/Gallery.svelte";
 export { default as Indicator } from "./indicators/Indicator.svelte";

package/dist/index.js

@@ -85,6 +85,7 @@ export { default as Range } from './forms/Range.svelte';
 export { default as Search } from './forms/Search.svelte';
 export { default as Select } from './forms/Select.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
+export { default as Timepicker } from './forms/Timepicker.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 
 // Gallery

package/dist/navbar/NavHamburger.svelte

@@ -23,4 +23,5 @@ const toggle = (ev) => hiddenStore.update((h) => !h);
 @prop export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
 @prop export let onClick: $$Props['onClick'] = undefined;
 @prop export let classMenu: $$Props['classMenu'] = '';
+@prop export let title: $$Props['title'] = 'Open main menu';
 -->

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -32,6 +32,7 @@ export type NavHamburgerSlots = typeof __propDef.slots;
  * @prop export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
  * @prop export let onClick: $$Props['onClick'] = undefined;
  * @prop export let classMenu: $$Props['classMenu'] = '';
+ * @prop export let title: $$Props['title'] = 'Open main menu';
  */
 export default class NavHamburger extends SvelteComponentTyped<NavHamburgerProps, NavHamburgerEvents, NavHamburgerSlots> {
 }

package/dist/table/TableBodyRow.svelte

@@ -2,7 +2,7 @@
 import { getContext } from "svelte";
 export let color = getContext("color");
 const colors = {
-  default: "bg-white dark:bg-gray-800 dark:border-gray-700",
+  default: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
   blue: "bg-blue-500 border-blue-400",
   green: "bg-green-500 border-green-400",
   red: "bg-red-500 border-red-400",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.48.3",
+  "version": "0.48.5",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "packageManager": "pnpm@8.15.4",
@@ -364,6 +364,10 @@
       "types": "./dist/forms/Textarea.svelte.d.ts",
       "svelte": "./dist/forms/Textarea.svelte"
     },
+    "./Timepicker.svelte": {
+      "types": "./dist/forms/Timepicker.svelte.d.ts",
+      "svelte": "./dist/forms/Timepicker.svelte"
+    },
     "./Toggle.svelte": {
       "types": "./dist/forms/Toggle.svelte.d.ts",
       "svelte": "./dist/forms/Toggle.svelte"